寫好的範例,可以按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之前。
1 |
$( "form" ).validate( |
2 |
{ |
3 |
submitHandler: function (form){ |
4 |
//可以在這裡改成用$.ajax()送出。 |
5 |
$.post(url,data,successCallback); |
6 |
return false ; //回傳false會阻止原本的form submit。 |
7 |
} |
8 |
}); |
invalidHandler
發生時機:按下submit後,執行驗證,發生錯誤時。
1 |
$( "form" ).validate( |
2 |
{ |
3 |
invalidHandler: function (form){ |
4 |
$( "#summary" ).fadeOut().fadeIn(); |
5 |
} |
6 |
}); |
success
發生時機:每一個驗證對向驗證成功時。
注意:參數是error,也就是通知在驗證對向後方的錯誤訊息。
01 |
$( "form" ).validate( |
02 |
{ |
03 |
success: function (error){ |
04 |
//因為success,如果是文字時代表error的成功時的className,改成function時className就要寫死了。 |
05 |
//不像highlight,className寫在validClass、errorClass變數中 |
06 |
|
07 |
//增加OK文字 |
08 |
error.addClass( 'valid' ).text( 'OK' ); |
09 |
} |
10 |
}); |
highlight
發生時機:每一個驗證對向驗證失敗時。
1 |
$( "form" ).validate( |
2 |
{ |
3 |
highlight: function (element, errorClass, validClass){ |
4 |
//因為覆寫,要自己加上預設效果 |
5 |
$(element).addClass(errorClass).removeClass(validClass); |
6 |
//增加fadeOut、fadeIn的效果 |
7 |
$(element).fadeOut().fadeIn(); |
8 |
} |
9 |
}); |
unhighlight
發生時機:每一個驗證對向驗證成功時。
1 |
$( "form" ).validate( |
2 |
{ |
3 |
unhighlight: function (element, errorClass, validClass){ |
4 |
//因為覆寫,要自己加上預設效果 |
5 |
$(element).removeClass(errorClass).addClass(validClass); |
6 |
} |
7 |
}); |
showErrors
發生時機:每一次發生驗證時,包含成功或失敗,我個人覺得改名成showMessages或renderMessages比較直覺點。
01 |
$( "form" ).validate( |
02 |
{ |
03 |
showErrors: function (){ |
04 |
//增加錯誤的摘要 |
05 |
$( "#summary" ).html( "Your form contains " + this .numberOfInvalids() + " errors, see details below." ); |
06 |
|
07 |
//不呼叫defaultShowErrors其他如highlight,unhighlight等方法是不會被呼叫的 |
08 |
this .defaultShowErrors(); |
09 |
} |
10 |
}); |
errorPlacement
發生時機:為每個驗證對向填加error時,不想加到正後方可覆寫此function。
1 |
$( "form" ).validate( |
2 |
{ |
3 |
errorPlacement: function (error, element){ |
4 |
//加到下一個td中 |
5 |
error.appendTo(element.parent( 'td' ).next( 'td' )); |
6 |
} |
7 |
}); |