jQuery ValidateとWP-Pointers

Question

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

は、これはどのようにのように見えるjavascriptのWP-ポインター：

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

    } 
}).pointer('open'); 

はこれがどのようにのように見えるjavascriptの検証：WP-ポインタスクリプトは次のように渡すことができれば、私は思っていた

$('.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-Pointersとしてエラーメッセージを表示するための検証スクリプト内の関数または何か？

Answer 1

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