javascript - 如何同时使用jQuery验证器和AJAX请求？

Question

我正在使用jQuery Validation Plugin .

我正在尝试使用 AJAX 提交登录页面，但同时我也尝试使用 jQuery Validate 验证表单；但是，当我提交它时，我仅在提交 AJAX 请求后验证最后一个字段；因此没有进行任何验证。

我正在尝试禁用表单的提交按钮，直到验证通过。然后允许 AJAX 请求发生，一旦验证，它将取消禁用该按钮；允许用户使用 Enter 或单击按钮提交表单。但它似乎不起作用。

$(document).ready(function() {
    $("#signin").validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true,
                minlength: 8,
                maxlength: 50
            }
        },
        messages: {
            username: {
                required: "Your username is required."
            },
            password: {
                required: "Your password is required.",
                minlength: "Passwords are between 8-50 characters.",
                maxlength: "Passwords are between 8-50 characters."
            }
        }
    });
    $("form .login").click(function () {
        $.ajax(/* ... */);

        return false;
    });
});

Answer 1

不要在提交按钮上使用 click 事件监听器，而是在表单上使用 submit 事件。您还需要使用 .valid() 方法检查表单是否有效:

$("form").submit(function() {
  if (!$("form").valid()) return;

  var username = $("form #username").val();
  var password = $("form #password").val();
  // ...
});