JQuery Validation: Validating hidden fields

Question

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?

Answer 1

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.

Answer 2

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.