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 dataval = true datavalrequired = 不可空白 />
< span datavalmsgfor =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,此一解决方案也一并提供大家参考。

 

本文链接



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量