jQuery plugin Validation Callback使用

 

 

 

 

寫好的範例,可以按Result實際執行看看。

image

圖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});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值