Question

我有一个简单的表单，我使用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); 
                            }
            });

Answer 1

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

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

$(document).ready(function() {

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

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

});

然后正确利用......内的回调函数

1）在return false方法中的submitHandler回调中仅放置.validate()。

$("#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）在.valid()方法中使用beforeSubmit和.ajaxForm()回调函数。

$('#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

jQuery Form插件在使用jQuery Validation插件时不提交

1 个答案: