jquery validationEngine 使用ajax验证不通过也提交表单

时间:2022-11-17 18:16:37

转自 http://mylfd.iteye.com/blog/2007227     

validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:

1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.

2 使用ajax提交表单,但是没有使用ajax验证.

         这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:

Js代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. //验证不通过时return  
  2.     if(!$("form#ajaxForm").validationEngine("validate")) return ;  
  3.     $.ajax({  
  4.        type: "POST",  
  5.        url: $("#ajaxForm").attr("action"),  
  6.        data: $("#ajaxForm").serialize(),  
  7.        dataType: "html",  
  8.        success: function(data){  
  9.           xxxx     }  
  10.     });  

 

 

3 使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图:


jquery validationEngine 使用ajax验证不通过也提交表单
 

.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:

Js代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. function beforeCall(form,options){  
  2.     if(window.console){  
  3.         console.log("表单提交验证通过后,Ajax 提交之前的回调");  
  4.     };  
  5.     return true;  
  6. };  
  7.       
  8. //   
  9. function ajaxValidationCallback(status,form,json,options){  
  10.     if(window.console){  
  11.         console.log(status);  
  12.     };  
  13.           
  14.     if(status === true){  
  15.         alert("the form is valid!");  
  16.     }  
  17. };  
  18.       
  19. jQuery(document).ready(function(){  
  20.     jQuery("#formID").validationEngine({  
  21.         ajaxFormValidation: true,  //是否使用 Ajax 提交表单  
  22.         ajaxFormValidationMethod: 'post',  //设置 Ajax 提交时,发送数据的方式  
  23.         onAjaxFormComplete: ajaxValidationCallback,  //表单提交,Ajax 验证完成后  
  24.         onBeforeAjaxFormValidation: beforeCall  //表单提交验证通过后,Ajax 提交之前的回调  
  25.     });  
  26. });  

 

beforeCall 这个方法是不会调用的是不会调用的,所以还是不能使用

 

4 使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了.

对于第三种和第四种方式,解决方式如下:

在使用ajax验证的表单form标签上加上自定义属性control="userName,email" 属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).

Html代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. <form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">  

在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)

Html代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. <input class="textBox validate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]" type="text" name="userName" id="userName" maxlength="128" url="admin/user/uniqueName.htm" error="用户已存在..."/>  

 

javascript当中声明两个全局数组 

var controlId = new Array();  //保存验证不通过的控件ID
var errors = new Array() ;  //保存验证不通过的提示信息

思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时 将控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.当提交表单时判断controlId 是否为空,不为空则循环显示提示信息.

Js代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. $(function() {    
  2.     var ajaxForm2Controls = $("form#ajaxForm2Controls") ;  
  3.     //表单提交时  
  4.     $(ajaxForm2Controls).submit(function() {  
  5.         ajaxForm2Control(ajaxForm2Controls) ;  
  6.         return false ;  
  7.     }) ;  
  8.     //失去焦点时验证控件  
  9.     valControls(ajaxForm2Controls) ;  
  10. });  

 

 表单提交方法:

Js代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. function ajaxForm2Control(obj) {  
  2.     //当存在错误信息时返回,找显示错误信息  
  3.     if(controlId.length > 0) {  
  4.         alertinfo() ;  
  5.         return false ;   
  6.     }  
  7.     if(!$(obj).validationEngine("validate")) return false;  //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回)  
  8.     $.ajax({  
  9.        type: "POST",  
  10.        url: $(obj).attr("action"),  
  11.        data: $(obj).serialize(),  
  12.        dataType: "html",  
  13.        success: function(data){  
  14.            xxxxxx  
  15.        }  
  16.     });  
  17. }  

 

 为表单添加焦点事件

 

Js代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. //表单需要验证的控件  
  2. function valControls(ajaxForm2Controls) {  
  3.     //获取需要使用ajax验证的控件  
  4.     var controlsStr = ajaxForm2Controls.attr("control") ;  
  5.     //属性未定义时返回  
  6.     if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;  
  7.     //分隔获取控件ID  
  8.     var controls = controlsStr.split(/,/g) ;  
  9.     for(var i in controls) {  
  10.         //添加焦点离开事件  
  11.         $("#" + controls[i]).blur(function() {  
  12.           if($(this).val().length <= 0) return false;  
  13.             //重新设置数组  
  14.             controlId.length = 0;   
  15.             errors.length = 0 ;  
  16.             //错误信息  
  17.             var error = $(this).attr("error") ;  
  18.             $.ajax({  
  19.                type: "GET",  
  20.                url: $(this).attr("url"),  
  21.                data: $(this).serialize(),  
  22.                dataType: "text",  
  23.                success: function(data){  
  24.                    if(data==="true") {  
  25.                      //验证不通过将错误信息放入数组中  
  26.                        controlId.push(controls[i]);  
  27.                        errors.push(error) ;  
  28.                        //提示信息  
  29.                        alertinfo() ;  
  30.                    }  
  31.                }  
  32.             });  
  33.         }) ;  
  34.     }  
  35. }  

   

错误提示信息:

 

Js代码   jquery validationEngine 使用ajax验证不通过也提交表单
  1. //弹出信息  
  2. function alertinfo() {  
  3.     if(controlId.length > 0) {  
  4.         for(var i in controlId) {  
  5.             //validationEngine方法,为指定ID弹出提示.  
  6.                         //用法:<span style="">$("#id").validationEngine("showPrompt","提示内容","load");  
  7.                            //<span style="">在该元素上创建一个提示,3 种状态:"pass", "error", "load"</span></span>  
  8.             $("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");  
  9.         }   
  10.     }  
  11. }  

    

这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.