jQuery plugin Validation的7个Callback介绍

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'));
    }
});

 

<form>
    <table>
        <tr>
            <th>Test1 : </th>
            <td><input type='text' name='test1' /></td>
            <td></td>
        </tr>
        <tr>
            <th>Test2 : </th>
            <td><input type='text' name='test2' /></td>
            <td></td>
        </tr>
        <tr>
            <th colspan='3'><input type='submit'></th>            
        </tr>
        <tr>
            <th colspan='3'><div id="summary"></div></th>            
        </tr>
    </table>        
<form>

 

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); }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注1:这7个Callback都有默认值，覆写后像highlight，就会没有原本的效作，如果要保留原效果请加上原本的Code
注2:参数不是文字就是jQuery的Object。

submitHandler

发生时机:按下submit后，执行验证，所以验证都成功，在呼叫form.submit之前。

$("form").validate(
{    
    submitHandler:function(form){        
        //可以在這裡改成用$.ajax()送出。
        $.post(url,data,successCallback);
        return false; //回傳false會阻止原本的form submit。
    }    
});

invalidHandler

发生时机:按下submit后，执行验证，发生错误时。

$("form").validate(
{    
    invalidHandler:function(form){       
        $("#summary").fadeOut().fadeIn();
    }    
});

success

发生时机:每一个验证对向验证成功时。

注意:参数是error，也就是通知在验证对向后方的错误讯息。

$("form").validate(
{    
    success:function(error){
        //因為success，如果是文字時代表error的成功時的className，改成function時className就要寫死了。
        //不像highlight，className寫在validClass、errorClass變數中        

    	//增加OK文字
        error.addClass('valid').text('OK');
    }
});

highlight

发生时机:每一个验证对向验证失败时。

$("form").validate(
{    
    highlight:function(element, errorClass, validClass){
        //因為覆寫，要自己加上預設效果
        $(element).addClass(errorClass).removeClass(validClass);
    //增加fadeOut、fadeIn的效果
        $(element).fadeOut().fadeIn();        
    }
});

unhighlight

发生时机:每一个验证对向验证成功时。

$("form").validate(
{    
    unhighlight:function(element, errorClass, validClass){
        //因為覆寫，要自己加上預設效果
        $(element).removeClass(errorClass).addClass(validClass);
    }
});

showErrors

发生时机:每一次发生验证时，包含成功或失败，我个人觉得改名成showMessages或renderMessages比较直觉点。

$("form").validate(
{    
    showErrors:function(){
        //增加錯誤的摘要
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
        
        //不呼叫defaultShowErrors其他如highlight,unhighlight等方法是不會被呼叫的
        this.defaultShowErrors();
    }
});

errorPlacement

发生时机:为每个验证对向填加error时，不想加到正后方可覆写此function。

$("form").validate(
{    
    errorPlacement:function(error, element){
        //加到下一個td中
        error.appendTo(element.parent('td').next('td'));
    }
});