jquery validate 过早检查表单

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');
    }

}