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