Question

I’m having trouble getting jQuery validate to ensure that a checkbox field has been checked. Other fields validate fine.

Here’s my JS:

$(".my-form").validate({
  errorLabelContainer: ".form-errors",
  wrapper: "li",
  rules: {
    cf_enquiry_accept_terms_cond: "required"
  },
  messages: {
    cf_enquiry_accept_terms_cond: "You must accept our terms and conditions"
  },
});

And the HTML for the checkbox field (which I have no control of, as it’s auto-generated with a CMS tag):

<div>
  <label for="cf_enquiry_accept_terms_cond">Accept Terms &amp; Conditions</label>
  <input type="hidden" name="cf_enquiry_accept_terms_cond" value="n" />
  <label><input type="checkbox" name="cf_enquiry_accept_terms_cond[]" value="Yes"  />&nbsp;Accept Terms & Conditions</label> <div style="clear:left"></div>
</div>

Any ideas where I’m going wrong with this? I copied the rule/message from the demo on the jQuery validate page.

Answer 1

<input type="checkbox" name="cf_enquiry_accept_terms_cond[]" value="Yes"  />

should include id element and should be

<input type="checkbox" id="cf_enquiry_accept_terms_cond" name="cf_enquiry_accept_terms_cond[]" value="Yes"  />