寫好的範例，可以按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 |
}); |