javascript - 当有ajax调用时，jquery验证不工作

Question

我有一个 js 代码，它使用 jquery 验证来验证表单。之后它调用ajax。

$('.form').validate({
    rules: {
        ---- 
    }
});
$('#submit').click(function() {

    $.ajax(url,{
        data:data,
        success:onSuccess,
        error:onError,
        type:POST
    });
    return FALSE;
});

onSuccess 和 onError 是简单的函数。url 是预定义的

但是使用此代码，它不会进入验证并直接调用 ajax，无论如何。

Answer 1

您不应该click在提交按钮上绑定事件。您应该将函数放在submitHandlerJQuery 验证选项上。像这样

 $('.form').validate({
    rules: {
    ---- 
    },
    submitHandler: function(form){
        //your code here..
    }
});

这是更好理解的JQuery Validation 文档。

Answer 2

试试这个：

$(".form").submit(function(e) {
    e.preventDefault();
}).validate({
    rules: {...},
    submitHandler: function(form) { 
        alert("Do some stuff...");
        $.ajax(url,{
           data:data,
           success:onSuccess,
           error:onError,
           type:POST
        });
        return false;  
    }
});

阅读防止表单在 jQuery Validate 插件的 submitHandler 函数中提交

Answer 3

使用提交处理程序来处理自定义提交逻辑

$('.form').validate({
    rules: {

    },
    submitHandler: function() {
        //your ajax save
        $.ajax(url, {
            data:data,
            success:onSuccess,
            error:onError,
            type:POST
        });
        return false;
    }
});

如果要使用自定义提交逻辑，请检查表单是否有效，例如

$('#submit').click(function() {
    if(!$('.form').valid()){
        return false;
    }

    $.ajax(url,{
        data:data,
        success:onSuccess,
        error:onError,
        type:POST
    });
    return false;
});

Answer 4

重新检查您的表单类以更好地使用 id 作为表单

 $(".form").validate({

验证后最好使用 submitHandler 函数，该函数将调用 ajax，如：

 submitHandler: function(form) {
                    form.submit();
                }