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?

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
– TLS, Commented Dec 19, 2012 at 12:56

TLS · Accepted Answer · 2012-12-19 13:04:40Z

6

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.

edited Dec 19, 2012 at 13:04

answered Dec 19, 2012 at 12:58

TLS

3,1502 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

My Head Hurts Over a year ago

+1 awesome - seems a bit strange that they are reliant on ids. Thanks for the solution!

politus Over a year ago

it is just name the inputs need

MG_Bautista · Accepted Answer · 2012-12-19 13:53:02Z

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.

edited Dec 19, 2012 at 13:53

answered Dec 19, 2012 at 13:22

MG_Bautista

2,6812 gold badges21 silver badges33 bronze badges

1 Comment

My Head Hurts Over a year ago

Thanks - it is not actually the rules I need, I was omitting the name attribute which was causing the issue (so your jsfiddle works, but it is because you added the name attribute to the input rather than needing the rules): jsfiddle.net/fbCVY/14

Collectives™ on Stack Overflow

JQuery Validation: Validating hidden fields

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related