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 に答える