jquery+ajax驗證不通過也提交表單問題處理


這篇文章主要介紹了jquery validationEngine中使用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驗證不通過也能提交表單,關於這種情況,網上很多例子是改源碼的,下面是截圖:

 

.這種方法對於目前這種情況可行,這種修改的方式本身就不建議,可能對其它地方產生影響.我發現的其中一個就是當下面這種情況時:

 

代碼如下: 
function beforeCall(form,options){  
    if(window.console){  
        console.log("表單提交驗證通過后,Ajax 提交之前的回調");  
    };  
    return true;  
};  
//   
function ajaxValidationCallback(status,form, json,options){  
    if(window.console){  
        console.log(status);  
    };  
    if(status === true){  
        alert("the form is valid!");  
    }  
};  
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(多個控件使用逗號分隔開).

 

代碼如下: 
<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">

在每個需要驗證的控件上加上兩個屬性url(ajax請求的地址)和errror(不通過時的提示信息)

 

代碼如下: 
<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 是否為空,不為空則循環顯示提示信息.

 

代碼如下: 
$(function() {    
    var ajaxForm2Controls = $("form#ajaxForm2Controls") ;  
    //表單提交時  
    $(ajaxForm2Controls).submit(function() {  
        ajaxForm2Control(ajaxForm2Controls) ;  
        return false ;  
    }) ;  
    //失去焦點時驗證控件  
    valControls(ajaxForm2Controls) ;  
});  

 表單提交方法:

 

代碼如下: 
function ajaxForm2Control(obj) {  
    //當存在錯誤信息時返回,找顯示錯誤信息  
    if(controlId.length > 0) {  
        alertinfo() ;  
        return false ;   
    }  
    if(!$(obj).validationEngine("validate")) return false;  //驗證沒有使用ajax驗證的控件(不是ajax驗證的字段是可以正常驗證的, 不通過就返回)  
    $.ajax({  
       type: "POST",  
       url: $(obj).attr("action"),  
       data: $(obj).serialize(),  
       dataType: "html",  
       success: function(data){  
           xxxxxx  
       }  
    });  
}  

 為表單添加焦點事件

 

代碼如下: 
//表單需要驗證的控件  
function valControls(ajaxForm2Controls) {  
    //獲取需要使用ajax驗證的控件  
    var controlsStr = ajaxForm2Controls.attr("control") ;  
    //屬性未定義時返回  
    if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;  
    //分隔獲取控件ID  
    var controls = controlsStr.split(/,/g) ;  
    for(var i in controls) {  
        //添加焦點離開事件  
        $("#" + controls[i]).blur(function() {  
          if($(this).val().length <= 0) return false;  
            //重新設置數組  
            controlId.length = 0;   
            errors.length = 0 ;  
            //錯誤信息  
            var error = $(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() ;  
                   }  
               }  
            });  
        }) ;  
    }  
}  
  

錯誤提示信息:

 

代碼如下: 
//彈出信息  
function alertinfo() {  
    if(controlId.length > 0) {  
        for(var i in controlId) {  
            //validationEngine方法,為指定ID彈出提示.  
                        //用法:<span style="">$("#id").validationEngine("showPrompt","提示內容","load");  
                           //<span style="">在該元素上創建一個提示,3 種狀態:"pass", "error", "load"</span></span>  
            $("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");  
        }   
    }  
}  

這樣當我們無論是第三種方式還是第四種方式提交表單,提交前調用controlId是否有值就可以了.

原文鏈接:http://www.kubiji.cn/topic-id4378.html


注:相關閱讀請移步到文章檔案WEB前端JS代碼頻道。

jquery+ajax驗證不通過也提交表單問題處理
原文出處:http://www.kubiji.cn/topic-id4378.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM