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

Надеюсь, это поможет, д.

---

Редактировать для комментариев:

Я не на 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');
    }

}