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

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(多個控制項使用逗號分隔開).

複製程式碼 程式碼如下:

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

複製程式碼 程式碼如下:

 

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     //分隔取得控制項ID 
    var controls = controlsStr.split(/,/g) ; 
    for(var i in controls) { 
        //新增焦點離開事件 
        $("#" controls[i]).blur(function() { 
          if($(this).val().length             //重新設定陣列 
            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彈出提示. 
                        //用法:$("#id").validationEngine("showPrompt","提示內容                            //在該元素上建立一個提示，3 種狀態：「             $("#" controlId[i]).validationEngine("showPrompt", errors[i], "error"); 
        }  
    } 
} 

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