结合JQuery验证后跟ajax post




validation (3)

我确定这很简单,但我是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,
        });
    });
});

我似乎无法做的是将两者结合起来,这样,如果电子邮件有效,它就会发布。 我真的很感激如何做到这一点的帮助。

非常感谢


你应该能够使用submitHandler选项,它本质上是一个回调函数,当表单被验证时被调用:

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

当表单有效时处理实际提交的回调。 获取表单作为唯一的参数。 替换默认的提交。 验证后,通过Ajax提交表单的正确位置。


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

我也清理了一下你的示例代码,试图告诉你如何编写更多地道的jQuery。

  1. 我已经使用jQuery.post()而不是jQuery.ajax()因为jQuery.ajax()是一个低级的方法,只有当你想定制AJAX请求的行为时才使用它,就像我们自定义.validate()的行为。

  2. 可以通过调用.serialize()来准备表单的所有输入。 这会准备一个URL编码的键值字符串,比如name=John+Doe&email=john%40doe.com ,然后它可以作为POST的数据。

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

在进行.ajax()调用之前,检查表单是否有效,然后继续使用if ($('#subscribe-form').valid()) { ... }





post