Question

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

我似乎无法做到的是将它们两者结合起来，这样如果电子邮件有效，它就会发布。我非常感谢有关如何做到这一点的帮助。

非常感谢

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

结合JQuery验证，然后是ajax发布

4 个答案: