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?

Try `required: $('#sendViaFax')[0].checked` – Tushar Gupta - curioustushar Mar 12 '14 at 02:45 — Tushar Gupta - curioustushar, Mar 12 '14 at 02:45
Which version of jQuery Validate? – Sparky Mar 12 '14 at 03:08 — Sparky, Mar 12 '14 at 03:08

score 1 · Accepted Answer · edited May 23 '17 at 11:57

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: []

edited May 23 '17 at 11:57

Community

1
1

answered Mar 12 '14 at 03:07

Sparky

98,165
25
199
285

I am using 1.11.1 of the validation & additional methods. However, i'm using a fairly old version of jquery. (Any time I try to update it, various datatables features mess up, so I've kept it to jquery-1.6.2. – paige1025 Mar 12 '14 at 12:56
Also, I've tried ignore: []. And, I've tried putting the ignore on the validator object. Let me try taking out require_from_group and see if it works. (I was so sure it was the tokeninput causing the problem.) If taking out require_from_group makes it work, maybe i can do a basic dependency on the two checkboxes, requiring it if the other is NOT checked. let me try that. i'll get back to you in a minute. – paige1025 Mar 12 '14 at 12:58
AWESOME!! You're amazing!!! Yep, taking out the required_from_group worked. Instead, I used "required: depends" as follows: – paige1025 Mar 12 '14 at 13:08
oops, i pressed enter before putting in the code:

sendViaEmail: { //required: [1, ".sendviagroup"] required: { depends: function(element) { if ($('#sendViaFax').is(':checked')){ return false; } else{ return true; } } } } – paige1025 Mar 12 '14 at 13:10

jquery tokeninput with jquery validate required

1 Answers1