jQuery plugin Validation Callback使用

jQuery plugin Validation的7個Callback介紹

Validation是jQuery的一個很強的驗證使用者輸入的plugin，功能強就算了，還非常的有彈性，可以客制非常多的東西，這次要介紹的是7個Callback使用，讓用Validation更隨心所欲。

版本

jQuery:1.4.2

Validation:1.7

資源

Validation官網

jsFiddle測試網頁

寫好的範例，可以按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之前。

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

});

invalidHandler

發生時機:按下submit後，執行驗證，發生錯誤時。

view source

print?

1	$("form").validate(

2

{

3	invalidHandler:function(form){

4	$("#summary").fadeOut().fadeIn();

5

}

6

});

success

發生時機:每一個驗證對向驗證成功時。

注意:參數是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

});

highlight

發生時機:每一個驗證對向驗證失敗時。

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

});

unhighlight

發生時機:每一個驗證對向驗證成功時。

view source

print?

1	$("form").validate(

2

{

3	unhighlight:function(element, errorClass, validClass){

4	//因為覆寫，要自己加上預設效果

5	$(element).removeClass(errorClass).addClass(validClass);

6

}

7

});

showErrors

發生時機:每一次發生驗證時，包含成功或失敗，我個人覺得改名成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

});

errorPlacement

發生時機:為每個驗證對向填加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

});