如何同时使用 jQuery 验证器和 AJAX 请求？答案

【问题标题】：How to use jQuery validator and AJAX request at the same time?如何同时使用 jQuery 验证器和 AJAX 请求？
【发布时间】：2016-03-25 15:38:14
【问题描述】：

我正在使用jQuery Validation Plugin。

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

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

$(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;
    });
});

【问题讨论】：

标签： javascript jquery ajax forms validation

【解决方案1】：

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

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

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

【讨论】：