jquery驗證檢查表格過早

Question

我有一個jQuery驗證在窗體上的設置。 表單填寫完成後，我的字段值ajax 2查看錶單是否可接受，並因此禁用/啓用表單的提交按鈕。

它看起來像是一個結果 - 表單是業餘的驗證 - 只有當提交按鈕被擊中時纔會發生。

任何人都可以提出修復？

謝謝！

下面是一些代碼：

//validate form: 
$("#ftblSubGroupsadd").validate({ 
    showErrors: function(){ 
     this.defaultShowErrors(); 
     alert('Note, a few mandatory fields remain un-answered.'); 
     $("label.error").closest("div[class=inside]").css("display","block"); 
     $("label.error").closest("div.boxed").removeClass().addClass('box'); 
    } 
    }); 

//check input of 2 fields, while form is still being filled out: 
$("#x_ShortFileName, #x_URL").change(function(){ 
    var fileName = $("#x_ShortFileName").val(); 
    var location = $("#x_URL").val(); 
    var sendStr = "fileName="+fileName+"&location="+location; 
    //alert(sendStr); 

    $("#locationResponse").load("/system/checkFileExists.asp",sendStr, function(response, status, xhr){ 
     var responseArr = response.split("|"); 
     if (responseArr[0] == "error") { 
      //alert("probem"); 
      $("#locationResponse").removeClass().addClass('red'); 
      $("#locationResponse").html(responseArr[1]); 
      $("#btnAction").attr("disabled","disabled"); 
      $("#finalURL").html(''); //(responseArr[2]); 
     } else { 
      //alert("all good"); 
      $("#locationResponse").removeClass().addClass('green'); 
      $("#locationResponse").html(responseArr[0]); 
      $("#btnAction").removeAttr("disabled"); 
      $("#finalURL").html(responseArr[1]); 
     } 
    }); 
}); 

HTML表單代碼：

<form name="ftblSubGroupsadd" id="ftblSubGroupsadd" action="tblSubGroupsadd.asp" method="post" enctype="multipart/form-data"> 

    <table class="ewTable"> 
<tr> 
    <td width="30%" class="ewTableHeader"><strong>Full Sub-Group Name</strong><span class='ewmsg'>&nbsp;*</span></td> 

    <td class="ewTableAltRow"><span id="cb_x_FullName"> 
     <input type="text" name="x_FullName" id="x_FullName" size="30" maxlength="500" value="" class="required" title=" "></span></td> 
    </tr> 
    <tr> 
    <td class="ewTableHeader"><strong>Short file name</strong> or<strong> access code</strong><span class='ewmsg'>&nbsp;*</span><br /> 
    <span class="grey">This will be used to create the file name </span></td> 

     <td class="ewTableAltRow"><span id="cb_x_ShortFileName"> 
    <input type="text" name="x_ShortFileName" id="x_ShortFileName" size="30" maxlength="30" value="" class="required" title=" " /> 
    </span> 
    <div id="locationResponse"></div></td> 
    </tr> 
    <tr> 
    <td class="ewTableHeader">Location of file<span class='ewmsg'>&nbsp;*</span><br /> 
    <span class="grey">Such as: /<strong>groups</strong>/xxxx.asp</span></td> 

    <td class="ewTableAltRow"><span id="cb_x_URL"> 
    <input type="text" name="x_URL" id="x_URL" size="30" maxlength="255" value="" class="required" title=" " /> 
    <div id="finalURL" class="green"></div> 
    </span></td> 
    </tr> 
<tr> 
    <td class="ewTableHeader">Display Program Dates? <span class="ewmsg">&nbsp;*</span></td> 

    <td class="ewTableAltRow"><span id="cb_x_optDisplayProgramDates"> 
    <input type="radio" name="x_optDisplayProgramDates" id="x_optDisplayProgramDates" value="0" class="required" title="*"> 
    No <input type="radio" name="x_optDisplayProgramDates" id="x_optDisplayProgramDates" value="1" class="required" title="*"> 
    Yes 


    </span></td> 
    </tr> </table> 
    <p align="center"> 
     <input type="submit" name="btnAction" id="btnAction" value="ADD"> 
    </form> 

可能AJAX返回數據：

error|Warning, the file groups/hop.asp already exists! 

或

The file name is available.|The location of your file will be: www.site.com/y/tyu.asp 

Answer 1

默認情況下，插件激活用戶輸入驗證。你應該停用這些選項：

$("#ftblSubGroupsadd").validate({ 
    onfocusout: false, 
    onkeyup: false, 
    onclick: false, 
    showErrors: function(){ 
     this.defaultShowErrors(); 
     alert('Note, a few mandatory fields remain un-answered.'); 
     $("label.error").closest("div[class=inside]").css("display","block"); 
     $("label.error").closest("div.boxed").removeClass().addClass('box'); 
    } 
}); 

希望這會有所幫助，d。

---

編輯意見：

我不是100％，但似乎處理程序（無論是你自己通過showErrors選項，或默認定義一個），又被稱爲當所有錯誤已更正。全處理程序簽名具有兩個參數：

showErrors: function(errorMap, errorList) { ... } 

第一個參數是一個地圖錯誤的，第二個是錯誤的數組。

所以你最好的選擇將是檢查的誤差量：

showErrors: function(errorMap, errorList) { 
    var len = errorList.length; // or var len = this.numberOfInvalids(); 
    if(len > 0) { 
     this.defaultShowErrors(); 
     alert('Note, a few mandatory fields remain un-answered.'); 
     $("label.error").closest("div[class=inside]").css("display","block"); 
     $("label.error").closest("div.boxed").removeClass().addClass('box'); 
    } 

}