结合 JQuery Validation 和 ajax post答案

【问题标题】：Combining JQuery Validation followed by ajax post结合 JQuery Validation 和 ajax post
【发布时间】：2011-10-27 12:29:24
【问题描述】：

我确信这很简单，但我是 JQuery 新手。我正在使用 JQuery 插件来验证电子邮件地址，这是可行的，代码是：

$(document).ready(function () {
    $("#email").click(function () {
        $(this).attr({value: ''});
    });
    $("#subscribe-form").validate();
});

然后我想做的是使用 ajax 帖子发布电子邮件地址，此代码在没有验证器的情况下也可以正常工作：

$(document).ready(function () {
    $('#submit').click(function () {
        var email = $('#email').val();
        var data = "email=" + email;
        $.ajax({
            type: "POST",
            url: "subscript.php",
            data: data,
        });
    });
});

我似乎无法将它们两者结合起来，这样如果电子邮件有效，它就会发布。我非常感谢有关如何执行此操作的帮助。

非常感谢

【问题讨论】：

标签： jquery ajax validation post

【解决方案1】：

.validate() 可以通过传入具有各种配置选项的对象来配置。在这种情况下，设置submitHandler 并回调您的表单提交代码应该可以完成这项工作。

我还稍微整理了您的示例代码，以向您展示如何编写更惯用的 jQuery。

我使用了jQuery.post() 而不是jQuery.ajax()，因为jQuery.ajax() 是一种低级方法，仅在您想要自定义AJAX 请求的行为时使用，就像我们的方式一样自定义.validate() 的行为。
可以通过调用.serialize() 来准备表单的所有输入以进行发布。这会准备一个 URL encoded 键值字符串，例如 name=John+Doe&email=john%40doe.com，然后可以用作 POST 的数据。

Example

$(document).ready(function() {
    $('#myForm').validate({
        submitHandler: function(form) {
            $.post('subscript.php', $('#myForm').serialize());
        }
    });
});

【讨论】：

【解决方案2】：

您应该能够使用submitHandler 选项，它本质上是一个回调函数，在表单被验证时被调用：

$('#submit').click(function () {
    $("#subscribe-form").validate({
        submitHandler: function(form) {
            //do submit
        }
    });
});

表单有效时处理实际提交的回调。获取形式作为唯一的论据。替换默认提交。正确的验证后通过 Ajax 提交表单的地方。

【讨论】：

【解决方案3】：

您可以在 ajax 调用之前执行以下操作来调用验证：

    if (!$('form').valid()) {
        return false;
    }

【讨论】：

【解决方案4】：

在拨打.ajax() 之前，请检查表格是否有效，然后再继续使用if ($('#subscribe-form').valid()) { ... }。

【讨论】：