jquery tokeninput with jquery validate required

Question

I have a form (ASP.NET MVC) with two tokeninput textboxes. I also use jquery.validate() function to validate that both of those fields are required.

My problem is, the required rule is not working on the first of the two tokeninput fields (It doesn't matter which one it is; I tested flipping the two fields.).

I made sure to set ignore = '' to allow for hidden fields, since the tokeninput basically changes the field to an unordered list and a hidden input field.

It's really strange, but I really want to require both of those fields. Any ideas?

Here's my code:

HTML CODE:

<form id="SendPOSettingsForm" method="post" name="SendPOInfo" action="/po/SendPOToVendor/">
  <div>
    <table cellpadding="2">
      <tr>
        <td><input type="checkbox" class="sendviagroup" name="sendViaEmail" id="sendViaEmail" value="Y" @emailChecked /> <b>Email To:</b> &nbsp;&nbsp;&nbsp;</td>
        <td>
          <input type="text" name="sendPOEmailTo" id="sendPOEmailTo" style="font-family: arial; font-size:11px;"  />
          <input type="hidden" name="sendPOEmailTo_List" id="sendPOEmailTo_List" value="@emailTo" />
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" class="sendviagroup" name="sendViaFax" id="sendViaFax" value="Y" onchange="UpdateAttnVisibility(this.checked);" @faxChecked /> <b>Fax To:</b> &nbsp;&nbsp;&nbsp;</td>
        <td>
          <input type="text" name="sendPOFaxTo" id="sendPOFaxTo" style="font-family: arial; font-size:11px;" />
          <input type="hidden" name="sendPOFaxTo_List" id="sendPOFaxTo_List"  value="@faxTo" />
        </td>
      </tr>
      <tr>
        <td><b>Subject:</b> &nbsp;&nbsp;&nbsp;</td>
        <td><input type="text" id="sendSubject" name="sendSubject" style="font-family: arial; font-size:11px; width:600px; height:25px;" /></td>
      </tr>
      <tr>
        <td valign="top"><b>Message:</b> &nbsp;&nbsp;&nbsp;</td>
        <td><textarea rows="10" cols="60" id="sendBody" name="sendBody" style="font-family: arial; font-size:11px;"></textarea></td>
      </tr>
    </table>
  </div>
  <div class="actions">
    <br />
    <input type="submit" id="bSendPO" value="&nbsp;&nbsp;Send&nbsp;&nbsp;" class="orangeButton2" style="font-weight:bold;" />
    &nbsp;&nbsp;
    <input type="button" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" onclick="CancelSendPO();" class="orangeButton2" style="font-weight:bold;" />
    <ul class="errorclass" id="errorsummary"></ul>
  </div>
</form>

SCRIPT CODE:

$("#sendPOEmailTo").tokenInput("/Admin/Cron/GetVendorContactEmails.aspx?v=" + vendorNo, {
  theme: "facebook",
  preventDuplicates: true,
  allowFreeTagging: true
});

$("#sendPOFaxTo").tokenInput("/Admin/Cron/GetVendorContactFaxes.aspx?v=" + vendorNo, {
  theme: "facebook",
  preventDuplicates: true,
  allowFreeTagging: true
});

var formValidator = $("#SendPOSettingsForm").validate({
  ignore: "",
  rules: {
    sendPOFaxTo: {
      required: "#sendViaFax:checked" //only required if sendViaFax is checked
    },
    sendPOEmailTo: {
      required: "#sendViaEmail:checked" //only required if sendViaEmail is checked
    },
    sendSubject: {
      required: true
    },
    sendViaEmail: {
      require_from_group: [1, ".sendviagroup"]
    },
    sendViaFax: {
      require_from_group: [1, ".sendviagroup"]
    }
  },
  submitHandler: function (form) {
    //alert("is successful, no problems");
    form.submit();
  }
});

When I test this, checking the "FAX" checkbox but leaving the "FAX TO" textbox blank works. This gives me an error message. HOWEVER, checking the "EMAIL" checkbox but leaving the "EMAIL TO" textbox blank submits the form without giving me an error! If I change the order of the HTML & put the two fax inputs before the email inputs, then the FAX TO (sendPOFaxTo) required rule breaks, and EMAIL (sendPOEmailTo) required rule works.

Any suggestions?

Answer 1

Quote OP:

"If I change the order of the HTML & put the two fax inputs before the email inputs, then the FAX TO (sendPOFaxTo) required rule breaks, and EMAIL (sendPOEmailTo) required rule works."

You are describing the symptoms of a known bug/issue with the require_from_group method that caused certain other inputs on the page to be ignored, depending on their placement.

The fix is to make sure you're using the latest versions of the jQuery Validation plugin and its additional-methods.js file, which is 1.11.1.

---

Also, the proper way to disable the ignore option is, not to set it to '' but, to set it to [] instead. See this answer: https://stackoverflow.com/a/8565769/594235

ignore: []