jQuery Validate hidden field

Question

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.

I've tried using a hidden field as described here 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?

The hidden field trick doesn't work any more, it's not validating hidden inputs anymore it seems.

<form method="post" accept-charset="utf-8" id="submit-work-form" role="form" action="/" novalidate="novalidate">
<div class="form-group">
  <input type="text" required="true" name="title"/>
    <input type="hidden" name="image_count" required="required" data-rule-validcmsimagecount="true" aria-required="true">
  <div class="photos">
    <!-- containers go here -->
    </div>
</div>
<div class="submit"><input type="submit" class="btn btn-black btn-default" value="Submit"></div>
</form>

JS:

$.validator.addMethod("validcmsimagecount", function(value, element) {
  alert('Doesn\'t work');
        return $('.photo-container').length > 0;
    }, "You must add at least one image.");

    $('#submit-work-form').validate({
        submitHandler: function (form) {
            form.submit();
        }
    });

You can try the Jsfiddle as well.

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

This is probably a duplicate of this post but since I updated your fiddle to fix it, I thought I would post is as an answer. Looks like you need to enable the validation of hidden fields and remove the required attribute from the hidden field. Once done, the validation will run, see the updated fiddle here , the main change is the addition of the ignore property:

$('#submit-work-form').validate({
       ignore: [],
            submitHandler: function (form) {
                form.submit();
            }
        });

edited May 23 '17 at 12:18

Community

1
1

answered Sep 28 '16 at 09:47

Dhananjay

544
3
7

Thank you! I've searched a long time and didn't found that option. :( I agree that this is technically a duplicate but the answer of the other question is not really up to date. See my comment I left there. – floriank Sep 28 '16 at 09:49
I just updated my answer, I meant to post a link to [this post](http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields) as the duplicate one – Dhananjay Sep 28 '16 at 09:51
Oh, OK. I haven't searched for that problem because it was just the workaround to my real problem. – floriank Sep 28 '16 at 09:53

score -1 · Answer 2 · edited May 23 '17 at 10:27

-1

Jquery validations ignores hidden fields by default, you can force validation for hidden fields by setting ignore option as below

$('#myform').validate({
        ignore: [],
        // any other options and/or rules
    });

jQuery Validate - Enable validation for hidden fields

Here is the modified example for your problem https://jsfiddle.net/9hoa1mrd/3/

edited May 23 '17 at 10:27

Community

1
1

answered Sep 28 '16 at 10:14

Kiran Bhadani

31
5

Though this may answer the question if you beleieve a question to be a duplicate of another question please flag it as such. Don't answer pointing to another question. Thanks – Liam Sep 28 '16 at 12:54

jQuery Validate hidden field

2 Answers2