Question

我在表单上有一个jquery验证设置。填写表单的时候，我输入字段值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');
    }

}

jquery validate过早地检查表单

1 个答案: