Question

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

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

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

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

但是这个代码没有进入验证并且直接调用ajax可能是这种情况。

Answer 1

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

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

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

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

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

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

当ajax调用存在时，jquery验证无效

4 个答案: