Question

i have a jquery validate setup on the form.
whil the form is being filled out, i ajax 2 of the field values to see if the form is acceptable or not, and as a result disable/enable the submit button of the form.

it seems like as a result – the form is premateurly validated – which shoudl only happen when the submit button is hit.

can anyone suggest a fix?

thanks!

Here is some code:

//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 code:

<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>

Possible ajax return data:

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

or

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

Answer 1

By default, the plugin activates validation on user input. You should deactivate those options :

$("#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');
    }
});

Hope this helps, d.

---

Edit for comments:

I’m not 100%, but it seems the handler (either your own defined via the showErrors option, or the default one) is called again when all errors have been corrected. The full handler signature has two parameters:

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

First argument is a map of the errors, second is an array of errors.

So your best bet would be to check the amount of errors:

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

}