jQuery验证和WP-指针

Question

我正在寻找使用WP-Pointers来显示由jQuery Validation Plugin生成的验证错误的可能性。

这是怎样的WP-指针的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-指针脚本可以作为传递一个函数或验证脚本中的某些内容将错误消息显示为WP-Pointer？

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 
        }); 
} 
});