jQuery Validation plugin - Validating hidden inputs and not visible?

Question

How would I validate hidden inputs and not visible text inputs with jQuery Form Validation plugin? The problem is, that I'm using auto-suggest plugin, which generates a hidden input for selected items:

<input id="hiddenInput" type="hidden" name="something" value="1" />

I have 2 inputs like this (both of them only allow 1 item), which I want to validate and display the error in parent <td>. This is what I've gotten so far, but it doesn't display the error or submit a form, if the value is actually a number.

$("#form1").validate({
        rules: {
            something: {
                number:true,
                min:1,
                required:true
            }
        }
        })

See also http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields. — goodeye, Jul 05 '14 at 19:33

score 125 · Accepted Answer · answered Dec 09 '11 at 23:30

125

To allow validation of hidden elements, override the ignore and set it to empty string:

$("#form1").validate({
    ignore: "",
    rules: {
        something: {
            number:true,
            min:1,
            required:true
        }
    }
});

answered Dec 09 '11 at 23:30

Josh

1,669
1
11
15

Have you tried this? because this is giving an error when I use ignore : "". `Uncaught TypeError: Cannot read property 'settings' of undefined` – Jereme Jan 20 '17 at 06:33
1

By default, for the last several years, this plugin will ignore (not validate) all hidden fields. The proper format to tell the plugin to ignore nothing and validate everything is `ignore: []` – Sparky Jun 30 '19 at 13:53

Emre Erkan · Answer 2 · 2012-08-06T08:58:27.657

30

You can use ignore option like this:

$("#form1").validate({
    ignore: "input[type='text']:hidden",
    rules: {
        something: {
            number:true,
            min:1,
            required:true
        }
    }
});

Default value of ignore option is :hidden which ignores all hidden fields and non-visible fields (display: none etc.)

edited Aug 06 '12 at 08:58

answered Oct 31 '11 at 10:09

Emre Erkan

8,433
3
48
53

2

Still doesn't validate. I add a rule to a hidden input and make sure it's not valid, but it still submits the form and no errors are shown at all! – Gregor Menih Oct 31 '11 at 10:22
@EmreErkan Documentation link is hosed now. – Patrick M Aug 06 '12 at 05:19

CMcClymont · Answer 3 · 2012-12-20T01:21:39.210

15

If the other answers aren't working for you, try this instead. It removes all ignores for the form, so it would validate everything including hidden fields:

$.data($('form')[0], 'validator').settings.ignore = "";

To restore the settings to ignore hidden fields, use something like this:

$.data($('form')[0], 'validator').settings.ignore = "input[type='text']:hidden";

You can also use the above code to read back the current value.

edited Dec 20 '12 at 01:21

answered Nov 22 '12 at 01:32

CMcClymont

586
5
6

I've tried it and it didn't work for me. It gives me `TypeError: $.data(...) is undefined`, I've checked `$` and it's proper jQuery object. Here is an alternative answer http://stackoverflow.com/a/8565769/1027198. – Michał Powaga Oct 09 '13 at 12:01
5

Oddly enough, your solution is the *only* one that worked for me - none of the other answers did. – Nathan Nov 21 '13 at 12:53
Confirmed working with Aspnet Core 3.1 MVC application – Andrew Grothe Apr 07 '20 at 14:42

score 5 · Answer 4 · edited Aug 26 '14 at 16:25

5

Another way to validate hidden inputs is this:

$("#form1").validate({
        ignore: "not:hidden",
        rules: {
            something: {
                number:true,
                min:1,
                required:true
            }
        }
});

edited Aug 26 '14 at 16:25

drneel

2,887
5
30
48

answered Aug 26 '14 at 16:16

lopradi

51
1
1

jQuery Validation plugin - Validating hidden inputs and not visible?

4 Answers4

Linked

Related