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:

<

Answer 1

I like the answer of @dSquared but unfortunately 'ignore'-property will be reseted for every form's validator on page. In some cases it doesnt need.

I use this way:

$(document).ready(function () {

    var $form = $("#some-form");

    $form.validate().settings.ignore = []; // ! Say to validator dont ignore hidden-elements on concrete form.

    $('#button-send').click(function () {
        if ($form.valid()) { .. }
    });

    // !! apply plugin's initializers which will hide origin elements (it can be CLEditor or Choosen plugins)
});

Answer 2

Another form to solve this problem is changing the display: none to visibility: hidden.

Eg: <input type="text" name="test" value="" style="visibility: hidden;" />

Answer 3

There are two things you can do.

1) you can statically set value, which does not fail validation, for this input field like

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

2) If you want to neglate this value in your validation method.

I would appreciate if you could provide more detail code.

Answer 4

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!

Answer 5

Have you tried adding the style attribute to the input element? So instead of wrapping it with a div, try:

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