1

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

验证没有问题，但表单插件没有提交。
它没有显示控制台的问题，甚至没有显示从脚本发送的任何 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); 
                            }
            });
4

1 回答 1

1

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

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

$(document).ready(function() {

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

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

});

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

1) 仅return false在方法submitHandler内的回调中放入 a .validate()。

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

2) .valid()是 jQuery Validate 插件中的一种方法，您可以调用它来检查表单的有效性并获得布尔结果。

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

于 2013-08-07T16:29:27.673 回答