jQuery 表单插件在与 jQuery 验证插件一起使用时未提交答案

【问题标题】：jQuery Form plugin not submitting while using it with the jQuery Validation pluginjQuery 表单插件在与 jQuery 验证插件一起使用时未提交
【发布时间】：2013-08-07 08:38:21
【问题描述】：

我有一个简单的表单，我使用jQuery Validation plugin 和jQuery Form plugin 来处理表单。

验证没有问题，但表单插件没有提交。
它没有显示控制台的问题，甚至没有显示从脚本发送的任何 ajax 调用。

$("#creatUser").validate({
                rules: {
                    firstname: {
                        required: true
                    }, 
                                        lastname: {
                        required: true
                    }, 
                    email: {
                        required: true, 
                        email: true
                    }, 
                    username: {
                        required: true
                    }, 
                    password: {
                        required: true, 
                        minlength: 5
                    },
                                        cpassword: {
                        required: true, 
                        minlength: 5, 
                        equalTo: '#password'
                    } 
                },

                invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        var message = errors == 1
                        ? 'You missed 1 field. It has been highlighted'
                        : 'You missed ' + errors + ' fields. They have been highlighted';
                        $("#da-ex-val1-error").html(message).show();
                    } else {
                        $("#da-ex-val1-error").hide();
                    }
                },
                                submitHandler: function(form) {
                                     var options = { 
                                           target: '#da-ex-val1-error',  
                                           success: function() { 
                                                alert('Thanks for your comment!'); 
                                            },
                                           url: 'php.php',
                                           type: 'POST'
                                       }; 

                                       // bind form using 'ajaxForm' 
                                       $('#creatUser').ajaxForm(options); 
                            }
            });

【问题讨论】：

你能展示足够的代码来构建一个完整的演示吗？ HTML 标记在哪里？

标签： jquery ajax jquery-validate ajaxform

【解决方案1】：

您似乎将功能操作与插件的初始化混淆了。

将.ajaxForm() 方法移出，使其成为.validate() 方法的兄弟...

$(document).ready(function() {

    $("#creatUser").validate(...);  // initialize jQuery Validate plugin

    $('#creatUser').ajaxForm(...);  // initialize Ajax Form plugin

});

然后在...内适当地利用回调函数

1) 在.validate() 方法内的submitHandler 回调中只放置一个return false。

$("#creatUser").validate({
    // your other options,
    submitHandler: function(form) {
        return false;  // block submit since another plugin is handling this
    }
});

2) .valid() is a method from the jQuery Validate plugin，您可以调用它来检查表单的有效性并获得布尔结果。

3) 在.ajaxForm() 方法中使用.valid() 和beforeSubmit 回调函数。

$('#creatUser').ajaxForm({
    // your other options,
    beforeSubmit:  function() {
        if $('#creatUser').valid() {  // check validity using jQuery Validate
            return true;  // proceed if valid
        } else {
            return false; // stop if not valid
        }
    }
})

见：http://malsup.com/jquery/form/#validation

【讨论】：