ignore: ":hidden" does not work for controls with display:none

Question

Hi I am using jquery validation to validate my aspx page. deliveryToDiv is hidden by setting

document.getElementById("deliveryToDiv").style.display = "none";

This div has other controls which will be validated depending on this div's visibility. But setting ignore:"hidden" does not appear to work on this div. The error message is thrown even if this div not visible. How can I detect if this div is visible and perform validation?

What is the workaround? please advise.Thank you in advance

If I am not wrong, ignore:"hidden" is used for input type hidden. — Ganesh Pandhere, Sep 13 '13 at 09:52
@FrédéricHamidi: thanks. i have missed leading colon. will give a try — hima, Sep 13 '13 at 09:54
@FrédéricHamidi: ignore:":hidden" did the trick. Would you mind posting your comment as answer? I can mark it as answer. thank you. — hima, Sep 13 '13 at 09:58
Which version of jQuery Validate? As of 1.9.0, all hidden elements are ignored by default... no need to use the `ignore` option. You're just over-riding this default by using `ignore`. See: http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/ — Sparky, Sep 13 '13 at 15:06
Then you don't need the `ignore` option at all. Remove it and everything will work as you've requested. — Sparky, Sep 13 '13 at 19:11

score 1 · Answer 1 · answered Sep 13 '13 at 10:00

1

:hidden is for <input type="hidden">. So maybe if you disable all fields in your div it will help. Validation should skip disabled fields.

answered Sep 13 '13 at 10:00

Dmitry Masley

525
4
9

strange, the div I am refering to in not a hidden field, but still ignore:":hidden" works for me. – hima Sep 13 '13 at 10:03
yes, you are right, just tested it and that works too. Looks like problem is in wrong value `ignore` as in another answer. – Dmitry Masley Sep 13 '13 at 10:15

score 1 · Accepted Answer · answered Sep 13 '13 at 10:09

1

The ignore option takes a selector, and the :hidden selector starts with a colon character.

Therefore, you should write:

ignore: ":hidden"

Instead of:

ignore: "hidden"

The latter matches <hidden> elements instead of elements that are not visible.

answered Sep 13 '13 at 10:09

Frédéric Hamidi

258,201
41
486
479

2

Should be noted that ignoring all hidden input elements is now the default behavior in v 1.9+. http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/ ~ _"...Another change should make the setup of forms with hidden elements easier, these are now ignored by default (option `ignore` has `:hidden` now as default)."_ – Sparky Sep 13 '13 at 15:04

score 0 · Answer 3 · answered Sep 13 '13 at 09:58

0

How can I detect if this div is visible and perform validation?

to do this you can follow like this:

if($('#deliveryToDiv').is(':visible')){
   // do the validation here
}else{
   // do the other stuff if not visible
}

answered Sep 13 '13 at 09:58

Jai

74,255
12
74
103

Sai Avinash · Answer 4 · 2013-09-13T10:11:31.740

-1

The possible reason can be that there is ignore: ':hidden' line in jquery.validate.unobtrusive.js file. Just remove that line.

After 1.9.0 version it was default behaviour. If the line doesn't exists in file(I'm not sure) you can fix that manually by adding

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

As you can see here

Another change should make the setup of forms with hidden elements easier, these are now ignored by default (option “ignore” has “:hidden” now as default). In theory, this could break an existing setup. In the unlikely case that it actually does, you can fix it by setting the ignore-option to “[]” (square brackets without the quotes).

edited Sep 13 '13 at 10:11

answered Sep 13 '13 at 10:06

Sai Avinash

4,683
17
58
96

You are only half correct. Yes, in version 1.9.0, ignoring hidden elements became a default behavior. However, setting the `ignore: []` option will **disable** that feature so it will **enable** validation for hidden fields. – Sparky Sep 13 '13 at 15:08

ignore: ":hidden" does not work for controls with display:none

4 Answers4