mvc3中使用unobtrusive时,ajax更新加载页面后验证失效解决方法

    在使用mvc做项目时，针对应用时常遇问题，发现一个问题:当使用AJAX方式动态更新<input>内容或验证时，应如何让验证生效?

    依据jquery.validate.unobtrusive.js的运作原理，它会在网页载入后立即响应.$.validator.unobtrusive.parse(document)解析读取元素的data-val-*标示，完成检核条件设定，这也意味着事后加入<input>或追加data-val-*将不会被纳入表单送出前的检核项目。Brad Wilson在文章中有一节"Parsing New HTML For Validation"提到可呼叫jQuery.validator.unobtrusive.parse()或jQuery.validator.unobtrusive.parseElement()重新解析并设定检核条件，但经实测，除非整个<form>是动态重新产生的，否则parse()/parseElement()并无预期效果，<form>的检核条件仍维持onload事件所读取到的内容。

   查看源码，发现问题出在jquery.validate.unobtrusive.js里$("form”).validate(…)重新设定表单验证条件，但在jquery.validate.js中，form一旦被validate( )设定过，validator物件就会被保存在$(theForm).data(“validator”)，之后再呼叫validate(options)，会只传回原先的validator物件，而不会将options的内容并入validator :

<! DOCTYPE  html >

 

< html >

< head >

    < title > mvc3中使用unobtrusive时,ajax更新加载页面后验证失效解决方法 </ title >

    < script  src ="jQuery/jquery-1.6.2.js"  type ="text/javascript" >  </ script >   

    <script src= "jquery.validate/1.8.1/jquery.validate.js" type= "text/javascript" > </ script >   

    <script src= "jquery.validate.unobtrusive.js" type= "text/javascript" > </ script > 

   

    <script type= "text/javascript" >

        $( function () {

            //tReq新增数字检核

            $( "#tReq" ).attr( "data-val-number" , "须为数字(动态加上的检索)" );

            //无中生有新增一个<input id=tDyna>，并加上必填检核

            var id = "tDyna" ;

            $( "#dvDyna" ).append( "<input type='text' id='" + id + "' />" );

            $( "#tDyna" ).attr({

                name: id,

                "data-val" : "true" ,

                "data-val-required" : "不可空白(动态加上的检索

)" , }).after( "<span data-valmsg-for='" + id + "' />" ); 



//要先移除原有设定  $( "#form1" ).removeData( "validator" ); 



//方法一，传入新增检核设定的元素，包含该元素的<form>会重设检核条件 

//$.validator.unobtrusive.parseElement(document.getElementById("tDyna"));

//方法二，传入内含<input data-val="true">元素的容器selector，//将重新解析容器内的元素的data-val-*设定，接着所有的<form>会更新检核规则 

//$.validator.unobtrusive.parse("#dvDyna"); 

//在本案例中方法一、二都只更新了<input id='tDyna'>。<input id='tReq'>新增的 //data-val-number并未被解析生效，我们可扩大解析范围改善这个问题 

 $.validator.unobtrusive.parse( "#form1" ); //或parse(document)亦可  });

 </ script > 

</ head > 

< body > 

< form id ="form1" >

 < div >

 < input type ="text" id ="tReq" name ="tReq" data-val = "true" data-val-required = "不可空白" />

 < span data-valmsg-for ="tReq" ></ span > </ div > < div id ="dvDyna" > </ div > < input type ="submit" value ="Submit" />

 </ form > 

</ body > 

</ html >

     值得注意的是，$(theForm).removeData(“validator”)的解法会移除原有的检索设定 ，如果曾另外动态修改validator内容，移除validator将 导致事后修改一并失效。针对这个缺点，XHalent提出了更优雅的解法，撰写了一支parseDynamicContent() Plugin可将新增的检核条件合并进原有的validator物件中，但必须多载入jQuery Plugin，此一解决方案也一并提供大家参考。