title: jQuery Validate hidden field
body: <p>I'm trying to validate the count of elements when a form is submitted via Jquery Validator. The reason is that we want at least one image to be present but we don't upload them directly but instead show a preview first. So I need to count them somehow and validate that at least one is present.</p>
  
  <p>I've tried using a hidden field <a href="https://stackoverflow.com/questions/6617642/jquery-validator-how-to-validate-against-non-form-items">as described here</a> but it is simply not working. The test field validates but for some reason my own rule doesn't even get triggered. What's wrong with my implementation?</p>
  
  <p>The hidden field trick doesn't work any more, it's not validating hidden inputs anymore it seems.</p>
  
  <pre><code>&lt;form method="post" accept-charset="utf-8" id="submit-work-form" role="form" action="/" novalidate="novalidate"&gt;
  &lt;div class="form-group"&gt;
    &lt;input type="text" required="true" name="title"/&gt;
      &lt;input type="hidden" name="image_count" required="required" data-rule-validcmsimagecount="true" aria-required="true"&gt;
    &lt;div class="photos"&gt;
      &lt;!-- containers go here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="submit"&gt;&lt;input type="submit" class="btn btn-black btn-default" value="Submit"&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$.validator.addMethod("validcmsimagecount", function(value, element) {
    alert('Doesn\'t work');
          return $('.photo-container').length &gt; 0;
      }, "You must add at least one image.");
  
      $('#submit-work-form').validate({
          submitHandler: function (form) {
              form.submit();
          }
      });
  </code></pre>
  
  <p>You can  try the <a href="https://jsfiddle.net/9hoa1mrd/" rel="nofollow noreferrer">Jsfiddle</a> as well.</p>