当有ajax调用时，jquery验证不起作用答案

【问题标题】：jquery validations not woking when ajax call is there当有ajax调用时，jquery验证不起作用
【发布时间】：2013-05-21 06:57:32
【问题描述】：

我有一个 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，无论如何。

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

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

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

这里是JQuery Validation docs 以便更好地理解。

【讨论】：

如果这对你有帮助，你介意接受这个作为答案吗？干杯！！

【解决方案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;  
    }
});

阅读Preventing a form from submitting in jQuery Validate plugin's submitHandler function

【讨论】：

【解决方案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;
});

【讨论】：

【解决方案4】：

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

 $(".form").validate({

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

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

【讨论】：