jquery+ajax验证不通过也提交表单问题处理
validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:
1使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.
2使用ajax提交表单,但是没有使用ajax验证.
这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:
//验证不通过时return if(!$("form#ajaxForm").validationEngine("validate"))return; $.ajax({ type:"POST", url:$("#ajaxForm").attr("action"), data:$("#ajaxForm").serialize(), dataType:"html", success:function(data){ xxxx } });
3使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图:
.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:
functionbeforeCall(form,options){ if(window.console){ console.log("表单提交验证通过后,Ajax提交之前的回调"); }; returntrue; }; // functionajaxValidationCallback(status,form,json,options){ if(window.console){ console.log(status); }; if(status===true){ alert("theformisvalid!"); } }; jQuery(document).ready(function(){ jQuery("#formID").validationEngine({ ajaxFormValidation:true, //是否使用Ajax提交表单 ajaxFormValidationMethod:'post', //设置Ajax提交时,发送数据的方式 onAjaxFormComplete:ajaxValidationCallback, //表单提交,Ajax验证完成后 onBeforeAjaxFormValidation:beforeCall //表单提交验证通过后,Ajax提交之前的回调 }); });
beforeCall这个方法是不会调用的是不会调用的,所以还是不能使用
4使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了.
对于第三种和第四种方式,解决方式如下:
在使用ajax验证的表单form标签上加上自定义属性control="userName,email"属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).
<formmethod="post"id="ajaxForm2Controls"action="admin/user/savePro.htm"control="userName">
在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)
<inputclass="textBoxvalidate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]"type="text"name="userName"id="userName"maxlength="128"url="admin/user/uniqueName.htm"error="用户已存在..."/>
javascript当中声明两个全局数组
varcontrolId=newArray(); //保存验证不通过的控件ID varerrors=newArray(); //保存验证不通过的提示信息
思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时将控件ID和提示信息添加到controlId和errors中,并且提示信息.当提交表单时判断controlId是否为空,不为空则循环显示提示信息.
$(function(){ varajaxForm2Controls=$("form#ajaxForm2Controls"); //表单提交时 $(ajaxForm2Controls).submit(function(){ ajaxForm2Control(ajaxForm2Controls); returnfalse; }); //失去焦点时验证控件 valControls(ajaxForm2Controls); });
表单提交方法:
functionajaxForm2Control(obj){ //当存在错误信息时返回,找显示错误信息 if(controlId.length>0){ alertinfo(); returnfalse; } if(!$(obj).validationEngine("validate"))returnfalse; //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的,不通过就返回) $.ajax({ type:"POST", url:$(obj).attr("action"), data:$(obj).serialize(), dataType:"html", success:function(data){ xxxxxx } }); }
为表单添加焦点事件
//表单需要验证的控件 functionvalControls(ajaxForm2Controls){ //获取需要使用ajax验证的控件 varcontrolsStr=ajaxForm2Controls.attr("control"); //属性未定义时返回 if(typeof(controlsStr)==="undefined"||controlsStr.length<=0)return; //分隔获取控件ID varcontrols=controlsStr.split(/,/g); for(variincontrols){ //添加焦点离开事件 $("#"+controls[i]).blur(function(){ if($(this).val().length<=0)returnfalse; //重新设置数组 controlId.length=0; errors.length=0; //错误信息 varerror=$(this).attr("error"); $.ajax({ type:"GET", url:$(this).attr("url"), data:$(this).serialize(), dataType:"text", success:function(data){ if(data==="true"){ //验证不通过将错误信息放入数组中 controlId.push(controls[i]); errors.push(error); //提示信息 alertinfo(); } } }); }); } }
错误提示信息:
//弹出信息 functionalertinfo(){ if(controlId.length>0){ for(variincontrolId){ //validationEngine方法,为指定ID弹出提示. //用法:<spanstyle="">$("#id").validationEngine("showPrompt","提示内容","load"); //<spanstyle="">在该元素上创建一个提示,3种状态:"pass","error","load"</span></span> $("#"+controlId[i]).validationEngine("showPrompt",errors[i],"error"); } } }
这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.