jquery validator plugin with display:none form elements

Question

I'm using the validator plugin found here to validate a form.

Problem I'm having is if I put the following around a form input element the validation fails:

<div style="display:none;"><input type="text" name="test" /></div>

I need this because I'm using other UI control layers for the input elements and don't want them visible.

It works on inline and block elements, but I need it to be hidden. Is there anyway to get around this?

Thanks for any feedback

Update:

I'm mostly validating select option fields, with django (ie: {{form.select_option_element}} )

So effectively:

<div style="display:none;">
    {{form.select_option_element}}
</div>

...doesn't work

Right after posting I seem to solve it with:

<div style="visibility: hidden; height: 0;">
     {{form.select_option_element}}
</div>

It then allows me to validate the field.

Answer 1

From the 1.9.0 Change Log of jQuery Validate:

• Fixed #189 - :hidden elements are now ignored by default

To turn it back on simply do the following:

$(document).ready(function(){    
    $.validator.setDefaults({
        ignore: []
    });
});

Make sure that this appears before you call the actual validation plugin in your code.

I hope this helps!