jQuery 유효성 검사 및 WP 포인터

Question

jQuery 유효성 검사 플러그인에서 생성 된 유효성 검사 오류를 표시하는 데 WP-Pointers를 사용할 가능성이 있습니다.

이는 방법과 같은 자바 스크립트 WP-포인터 :

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

    } 
}).pointer('open'); 

이 얼마나처럼 보이는 자바 스크립트 유효성 검사를 다음 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 - 포인터로 오류 메시지를 표시하는 유효성 검사 스크립트 안에 뭔가?

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