jQuery Validation plugin - Validating hidden inputs and not visible?

JqueryJquery Validate

Jquery Problem Overview


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
            }
        }
        })

Jquery Solutions


Solution 1 - Jquery

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
        }
    }
});

Solution 2 - Jquery

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.)

Solution 3 - Jquery

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.

Solution 4 - Jquery

Another way to validate hidden inputs is this:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGregor MenihView Question on Stackoverflow
Solution 1 - JqueryJoshView Answer on Stackoverflow
Solution 2 - JqueryEmre ErkanView Answer on Stackoverflow
Solution 3 - JqueryCMcClymontView Answer on Stackoverflow
Solution 4 - JquerylopradiView Answer on Stackoverflow