如何在jQuery Validate所有字段验证通过后调用指定函数？

已配置表单验证规则及提示信息如下：

$('.form').validate({
    rules:{
       nome:{
        minlength: 2
       },
       email:{
        email: true
       },
       telefone:{
        number: true,
        minlength: 10,
        maxlength: 10
       },
       mensagem: { 
        required: true
        }
    }, messages:{
        nome:{
            required: "Por favor digite seu nome!",
            minlength: "No mínimo 2 caracteres para o nome"
        },
        email: "Por favor digite seu email!",
        telefone:{
            required: "Por favor digite seu telefone!",
            minlength: "Telefone no mínimo 10 caracteres",
            maxlength: "Telefone no máximo 10 caracteres"
        } ,
        mensagem: "Por favor digite sua mensagem!"
    },
})

尝试使用submitHandler和success选项均未生效，期望在所有字段验证正确时运行以下AJAX函数：

$(function(){
    $('.form').submit(function(){
        $.ajax({
        url: 'validation.php',
        type: 'POST',
        data: $('.form').serialize(),
        success: function(data){
            $('.mostrar').html(data);
        }
    })
    return false;
    })
})

问题出在你同时绑定了表单的submit事件，和jQuery Validate的submitHandler逻辑冲突了。正确做法是移除单独的submit事件绑定，把AJAX逻辑直接放到validate配置的submitHandler中——这是插件专门用来处理验证通过后提交行为的回调函数。

修改后的完整代码：

$('.form').validate({
    rules:{
       nome:{
        minlength: 2
       },
       email:{
        email: true
       },
       telefone:{
        number: true,
        minlength: 10,
        maxlength: 10
       },
       mensagem: { 
        required: true
        }
    }, messages:{
        nome:{
            required: "Por favor digite seu nome!",
            minlength: "No mínimo 2 caracteres para o nome"
        },
        email: "Por favor digite seu email!",
        telefone:{
            required: "Por favor digite seu telefone!",
            minlength: "Telefone no mínimo 10 caracteres",
            maxlength: "Telefone no máximo 10 caracteres"
        } ,
        mensagem: "Por favor digite sua mensagem!"
    },
    // 验证通过后执行的回调
    submitHandler: function(form) {
        $.ajax({
            url: 'validation.php',
            type: 'POST',
            data: $(form).serialize(), // 直接使用form参数，更可靠
            success: function(data){
                $('.mostrar').html(data);
            }
        });
        return false; // 阻止表单默认提交行为
    }
});

关键说明： #

• submitHandler会在所有字段验证通过后触发，参数form是当前表单的DOM对象，用$(form).serialize()序列化表单数据比全局选择器更准确
• 不要同时绑定表单的submit事件，否则会干扰Validate插件的默认处理流程，导致submitHandler不生效
• 无需额外包裹$(function(){})，只要确保代码在DOM加载完成后执行即可（比如放在$(document).ready()中或页面底部）

内容的提问来源于stack exchange，提问作者BernardoDB