jquery-validate - jQuery 验证和 WP 指针

Question

我正在研究使用 WP-Pointers 显示 jQuery 验证插件生成的验证错误的可能性。

这就是 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-Pointers？

Answer 1

将 WP-Pointer 脚本包装为 jQuery Validate 的 invalidHandler 选项内的回调。此外，指定了没有回调的 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
                    });
}
});