title: Is checkbox validation with validate.js library broken?
body: <p>I need to add client-side form validation to an HTML5 form. I don't want to hack my own solution and I'm not using Angular. </p>
  
  <p>Since I'm using HTML5, the <code>pattern</code> and <code>required</code> attributes combined cover basic validation.</p>
  
  <p>However, where custom validation is needed, for example, requiring a specific combination of checkboxes are ticked - I need something more.</p>
  
  <p>A quick web search took me to <a href="https://www.codefellows.org/blog/the-ten-best-javascript-libraries-for-form-validation-and-formatting/#sthash.n1DBRais.dpuf" rel="nofollow noreferrer">The 10 Best JavaScript Libraries for Form Validation and Formatting</a>.</p>
  
  <p>I tested out <a href="http://rickharrison.github.io/validate.js/" rel="nofollow noreferrer">Validate.js</a> and hit a problem when validating checkboxes.  <a href="http://rickharrison.github.io/validate.js/" rel="nofollow noreferrer">Validate.js</a> binds to specific form elements by name, e.g.</p>
  
  <pre><code>var validator = new FormValidator('example_form', [{
      name: 'req',
      rules: 'required'
  });
  </code></pre>
  
  <p>The corresponding HTML form:</p>
  
  <pre><code>&lt;form name="example_form"&gt;
  &lt;input name="req" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I decided to apply this to a group of checkboxes AND implement my own custom rule (<a href="http://rickharrison.github.io/validate.js/" rel="nofollow noreferrer">documented on Validate.js</a>):</p>
  
  <pre><code> &lt;form name="example_form"&gt;
      &lt;input type="checkbox" name="test" value="a"&gt;
      &lt;input type="checkbox" name="test" value="b"&gt;
      &lt;input type="checkbox" name="test" value="c"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Firstly, the Validator configuration object adding my custom rule:</p>
  
  <pre><code>var validator = new FormValidator('example_form', [{
      name: 'test',
      rules: 'callback_my_rule'
  });
  </code></pre>
  
  <p>...notice the <code>required</code> rule (provided out-of-the-box) is gone, and has been replaced by my own rule <code>callback_my_rule</code>. Next I defined <code>my_rule</code> (as per the documentation, the <code>callback_</code> prefix is dropped):</p>
  
  <pre><code>validator.registerCallback('my_rule', function(value) {
      var atLeastOne = ($('[name="test"]:checked').length &gt; 0);
      return atLeastOne;
  });
  </code></pre>
  
  <p>A return value of <code>False</code> means validation failed, whereas <code>True</code> is valid.</p>
  
  <p>The problem is, if no checkboxes are ticked, my custom validation function, <code>my_rule</code>, is never called.  Only when I tick a checkbox is the function called. It seems a unintuitive to only call custom validation functions when a checkbox is ticked. </p>
  
  <p>The <a href="http://rickharrison.github.io/validate.js/" rel="nofollow noreferrer">Validate.js documentation</a> provides an example form with a checkbox, however, the checkbox validation function is omitted from the sample code: <a href="https://i.stack.imgur.com/7YejM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7YejM.png" alt="enter image description here"></a></p>
  
  <p>However, the example form does validate the checkbox, digging around the source of <a href="http://rickharrison.github.io/validate.js/" rel="nofollow noreferrer">Validate.js documentation</a>, I see the checkbox uses the out-of-the-box <code>required</code> rule: <a href="https://i.stack.imgur.com/zvy05.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvy05.png" alt="enter image description here"></a></p>
  
  <p>Questions</p>
  
  <ul>
  <li>Has anyone got Validate.js working with checkboxes and custom
  validation functions?</li>
  <li>Is there a better library for custom form
  validation?</li>
  </ul>