0

jQuery Validation Plugin によって生成された検証エラーを表示するために WP-Pointers を使用する可能性を検討していました。

WP-Pointer JavaScript は次のようになります。

$('.selector').pointer({
    content: '<h3>Error</h3><p>Lorem Ipsum.</p>',
    position: 'right',
    close: function() {

    }
}).pointer('open');

これは、検証 JavaScript がどのように見えるかです。

$('.registration-form').validate({
debug                   : true,
rules                   : { username    : {required: true, minlength: 4},
                            email       : {required: true, email: true}
},
messages                : { username    : 'Username must be atleast 4 characters long.',
                            email       : 'Please enter a valid email address.'
},
errorLabelContainer     : '.message-box',
submitHandler           : function(form) {
    $(form).ajaxSubmit({
        success         : show_registration_response,
        url             : ajaxVars.ajaxurl,
        type            : 'POST',
        timeout         : 10000,
        clearForm       : true,
        resetForm       : true
    }); 
}
});

エラーメッセージをWP-Pointerとして表示するために、WP-Pointerスクリプトを検証スクリプト内の関数または何かとして渡すことができるかどうか疑問に思っていましたか?

4

1 に答える 1

0

jQuery Validate の invalidHandler オプション内のコールバックとして WP-Pointer スクリプトをラップしました。また、要素の横にあるエラーの表示を停止するために、コールバックなしで errorPlacement オプションを指定しました。

$('.registration-form').validate({
debug           : true,
rules           : { username    : {required: true, minlength: 4},
                    email       : {required: true, email: true}
},
messages        : { username    : 'Username must be atleast 4 characters long.',
                    email       : 'Please enter a valid email address.'
},
invalidHandler  : function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        $(validator.errorList[0].element).pointer({
                            content: '<h3>Error</h3><p>' + validator.errorList[0].message + '</p>',
                            position: 'top',
                            close: function() {
                                // This function is fired when you click the close button
                            }
                        }).pointer('open');

                        validator.errorList[0].element.focus(); //Set focus
                    }
},
errorPlacement  : function(error, element) {

},
submitHandler   : function(form) {
                    $(form).ajaxSubmit({
                        success         : show_registration_response,
                        url             : ajaxVars.ajaxurl,
                        type            : 'POST',
                        timeout         : 10000,
                        clearForm       : true,
                        resetForm       : true
                    });
}
});
于 2012-04-14T03:11:31.510 に答える