寫好的範例,可以按Result實際執行看看。
圖1 測試的執行結果
7個Callback
Callback | 說明 | 預設值 |
submitHandler | 在Submit之前,且所有驗證成功,可以在這裡改成用$.ajax()送出。 | default (native) form submit |
invalidHandler | 在Submit之前,且驗證失敗。 | 沒有 |
success | 單項證驗成功,參數是error,不是驗證的對向,也可以是文字,如果文字會加入error的class中。 | "valid" |
highlight | 單項證驗失敗,參數是驗證對向 | function(element, errorClass, validClass){ element.addClass(errorClass).removeClass(validClass) } |
unhighlight | 單項證驗成功,參數是驗證對向 | function(element, errorClass, validClass){ element.addClass(validClass).removeClass(errorClass) } |
showErrors | 訊息顯示的Callback,名字取得不好,不是發生錯誤才會呼叫,而是只要有事件發生都會被呼叫,包含驗證成功。 | defaultShowErrors |
errorPlacement | error element的加入function | function (element,error){ element.after(error); } |
注1:這7個Callback都有預設值,覆寫後像highlight,就會沒有原本的效作,如果要保留原效果請加上原本的Code
注2:參數不是文字就是jQuery的Object。
submitHandler
發生時機:按下submit後,執行驗證,所以驗證都成功,在呼叫form.submit之前。
3 | submitHandler: function (form){ |
5 | $.post(url,data,successCallback); |
invalidHandler
發生時機:按下submit後,執行驗證,發生錯誤時。
3 | invalidHandler: function (form){ |
4 | $( "#summary" ).fadeOut().fadeIn(); |
success
發生時機:每一個驗證對向驗證成功時。
注意:參數是error,也就是通知在驗證對向後方的錯誤訊息。
03 | success: function (error){ |
08 | error.addClass( 'valid' ).text( 'OK' ); |
highlight
發生時機:每一個驗證對向驗證失敗時。
3 | highlight: function (element, errorClass, validClass){ |
5 | $(element).addClass(errorClass).removeClass(validClass); |
7 | $(element).fadeOut().fadeIn(); |
unhighlight
發生時機:每一個驗證對向驗證成功時。
3 | unhighlight: function (element, errorClass, validClass){ |
5 | $(element).removeClass(errorClass).addClass(validClass); |
showErrors
發生時機:每一次發生驗證時,包含成功或失敗,我個人覺得改名成showMessages或renderMessages比較直覺點。
03 | showErrors: function (){ |
05 | $( "#summary" ).html( "Your form contains " + this .numberOfInvalids() + " errors, see details below." ); |
08 | this .defaultShowErrors(); |
errorPlacement
發生時機:為每個驗證對向填加error時,不想加到正後方可覆寫此function。
3 | errorPlacement: function (error, element){ |
5 | error.appendTo(element.parent( 'td' ).next( 'td' )); |