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.

Please don't place the accepted answer within your question. Questions and answers should be kept separate. — dSquared, Sep 06 '12 at 21:29
possible duplicate of [jQuery Validate - Enable validation for hidden fields](http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields) — Fabio Antunes, Apr 15 '14 at 11:09

score 58 · Accepted Answer · edited Dec 03 '15 at 10:17

58

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!

edited Dec 03 '15 at 10:17

Jacob van Lingen

8,989
7
48
78

answered Sep 06 '12 at 21:21

dSquared

9,725
5
38
54

1

ah, thank you. That works quite nicely. I will use this instead. – Sep 06 '12 at 21:25
Why an empty array, not an empty string? – Lafi Apr 25 '14 at 23:20

vladimir · Answer 2 · 2013-06-26T08:59:22.890

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)
});

score 1 · Answer 3 · answered Sep 06 '12 at 20:57

1

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;" />

answered Sep 06 '12 at 20:57

rafiki_rafi

1,177
2
11
27

Nevermind, blanked out for a minute. Here is how I solved it:

– Sep 06 '12 at 21:03
I'm using django ModelForms, I forgot to mention I mostly validating select option list. – Sep 06 '12 at 21:04

score 0 · Answer 4 · answered Sep 06 '12 at 20:59

0

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.

answered Sep 06 '12 at 20:59

prakashpoudel

565
2
9
25

What I mean is that the validator doesn't even recognize the field, not the validation process itself. – Sep 06 '12 at 21:09
Well I saw the way you fixed it. Anyway good to see u got the solution. – prakashpoudel Sep 06 '12 at 21:16

score 0 · Answer 5 · answered Oct 26 '17 at 12:30

0

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

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

answered Oct 26 '17 at 12:30

Caike Bispo

111
1
5

jquery validator plugin with display:none form elements

5 Answers5

Linked

Related