JAVA高级面试进阶训练营视频教程

admin

    在使用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，此一解决方案也一并提供大家参考。