jQuery Validate hidden field
<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>