$("form").validate( { rules:{test1:{required:true},test2:{required:true}}, submitHandler:function(form){ //在Submit之前，且所有驗證成功。 //可以在這裡改成用$.ajax()送出。 $("#summary").html(""); return false; }, invalidHandler:function(form){ //在Submit之前，且驗證失敗。 $("#summary").fadeOut().fadeIn(); }, success:function(error){ //單項證驗成功，參數是錯誤Element //這callback也可以是文字，如果是文字會在error上加上class error.addClass('valid').text('OK'); }, highlight:function(element, errorClass, validClass){ //單項證驗失敗，參數是驗證對向 $(element).addClass(errorClass).removeClass(validClass); $(element).fadeOut().fadeIn(); }, unhighlight:function(element, errorClass, validClass){ //單項證驗成功，參數是驗證對向 $(element).removeClass(errorClass).addClass(validClass); }, showErrors:function(){ //訊息顯示的Callback，名字取得不好，不是發生錯誤才會呼叫，而是只要有事件發生都會被呼叫，包含驗證成功。 $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below."); //不呼叫defaultShowErrors其他如highlight,unhighlight等方法是不會被呼叫的 this.defaultShowErrors(); }, errorPlacement:function(error, element){ //錯誤element的加入function //如果不想放在正後方可以加這個callback error.appendTo(element.parent('td').next('td')); } });
寫好的範例，可以按Result實際執行看看。
圖1 測試的執行結果
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。
發生時機:按下submit後，執行驗證，所以驗證都成功，在呼叫form.submit之前。
view source print ? 1$("form").validate( 2{ 3 submitHandler:function(form){ 4 //可以在這裡改成用$.ajax()送出。 5 $.post(url,data,successCallback); 6 return false; //回傳false會阻止原本的form submit。 7 } 8});發生時機:按下submit後，執行驗證，發生錯誤時。
view source print ? 1$("form").validate( 2{ 3 invalidHandler:function(form){ 4 $("#summary").fadeOut().fadeIn(); 5 } 6});發生時機:每一個驗證對向驗證成功時。
注意:參數是error，也就是通知在驗證對向後方的錯誤訊息。
view source print ? 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});發生時機:每一個驗證對向驗證失敗時。
view source print ? 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});發生時機:每一個驗證對向驗證成功時。
view source print ? 1$("form").validate( 2{ 3 unhighlight:function(element, errorClass, validClass){ 4 //因為覆寫，要自己加上預設效果 5 $(element).removeClass(errorClass).addClass(validClass); 6 } 7});發生時機:每一次發生驗證時，包含成功或失敗，我個人覺得改名成showMessages或renderMessages比較直覺點。
view source print ? 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});發生時機:為每個驗證對向填加error時，不想加到正後方可覆寫此function。
view source print ? 1$("form").validate( 2{ 3 errorPlacement:function(error, element){ 4 //加到下一個td中 5 error.appendTo(element.parent('td').next('td')); 6 } 7});