JQuery Validation: Validating hidden fields

8
votes

Since the release of the JQuery Validation Plugin version 1.9.0, hidden fields have been automatically omitted from validation checks [source].

According to the release notes, the way to get around this is by setting ignore: [] in the validation function.

Using version 1.10.0, I am unable to get this to work for input fields that are hidden using display: none or visibility: hidden.

My validation is done using classes (eg, class="required") and the validation function is fairly basic:

JQuery

$("form").validate({
    ignore: [],  
    errorPlacement: function(error, element) {
        error.appendTo( $('#error-message') )
    },
    invalidHandler: function() {
        //do something 
    },
    submitHandler: function() {
        //do something else
    }
});

Working example: http://jsfiddle.net/fbCVY/

Can anyone point out where I am going wrong?

2
jqueryjquery-validate
When I run the jsfiddle in Firefox 17.0.1, the submit button always shows "no error" in the console - even after removing the CSS that hides the input fields. Am I missing something, or is the jsfiddle not really set up to fail the validation? – TLS

2 Answers

6
votes

I think you need to provide both a unique id and a unique name attribute for each of the input tags so that the validation plugin can find the fields and can tell them apart. The two "hidden" fields are not failing validation because the first field on the form passes, and that result is being used for the other two fields.

2
votes

Try with rules:

$("form").validate({
    ignore: "",
    rules: {
        name: ["aa", "ee"]
    },  
    errorPlacement: function(error, element) {
        error.appendTo( $('#error-message') )
    },
    invalidHandler: function() {
        //do something 
    },
    submitHandler: function() {
        //do something else
    }
});

Jsfiddle

Greetings.