jquery validation 7个有用的callback
时间:2011-01-24 来源:吴X
Validation是jQuery的一個很強的驗證使用者輸入的plugin,功能強就算了,還非常的有彈性,可以客制非常多的東西,這次要介紹的是7個Callback使用,讓用Validation更隨心所欲。
$("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')); } });
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 元素的加入function |
function (error,element){ element.after(error); } |
from:
http://www.dotblogs.com.tw/wadehuang36/archive/2010/08/22/17353.aspx