jQuery Validate - Enable validation for hidden fields

Question

In the new version of jQuery validation plugin 1.9 by default validation of hidden fields ignored. I'm using CKEditor for textarea input field and it hides the field and replace it with iframe. The field is there, but validation disabled for hidden fields. With validation plugin version 1.8.1 everything works as expected.

So my question is how to enable validation for hidden fields with v1.9 validation plugin.

This setting doesn't work:

$.validator.setDefaults({ ignore: '' });

See also http://stackoverflow.com/questions/7952181/jquery-validation-plugin-validating-hidden-inputs-and-not-visible — goodeye, Jul 05 '14 at 19:33
Validation is working by default for me with ``. I didn't have to change any settings or do anything special. — squarecandy, Sep 02 '18 at 18:24

score 353 · Accepted Answer · edited May 23 '17 at 12:02

353

The plugin's author says you should use "square brackets without the quotes", []

http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/

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). 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)."

To change this setting for all forms:

$.validator.setDefaults({ 
    ignore: [],
    // any other default options and/or rules
});

(It is not required that .setDefaults() be within the document.ready function)

OR for one specific form:

$(document).ready(function() {

    $('#myform').validate({
        ignore: [],
        // any other options and/or rules
    });

});

EDIT:

See this answer for how to enable validation on some hidden fields but still ignore others.

EDIT 2:

Before leaving comments that "this does not work", keep in mind that the OP is simply asking about the jQuery Validate plugin and his question has nothing to do with how ASP.NET, MVC, or any other Microsoft framework can alter this plugin's normal expected behavior. If you're using a Microsoft framework, the default functioning of the jQuery Validate plugin is over-written by Microsoft's unobtrusive-validation plugin.

If you're struggling with the unobtrusive-validation plugin, then please refer to this answer instead: https://stackoverflow.com/a/11053251/594235

edited May 23 '17 at 12:02

Community

1
1

answered Dec 19 '11 at 18:34

Sparky

98,165
25
199
285

29

Maybe the down-voter can give me some constructive feedback. Otherwise, the answer is fully self-contained, properly sourced, gives code examples, and is technically correct as per the plugin's author. – Sparky Mar 17 '13 at 00:41
Note that setDefaults must also be called within `$(document).ready(function() { })` in order to work – Stijn Van Bael Jul 11 '13 at 14:22
1

@StijnVanBael, no, that is false. See: http://jsfiddle.net/F4w92/1/ and also see my second comment on [jerick's answer](http://stackoverflow.com/a/10063394/594235). – Sparky Jul 11 '13 at 14:57
Well, it did not work for me until I put it inside `$(document).ready`. I'll try to find out why. – Stijn Van Bael Jul 12 '13 at 07:00
4

Well said @Sparky. The down-votes are probably kind of revenge, I've encountered the same.. – Omar Jul 22 '13 at 11:02
1

The JSFiddle doesn't work anymore because the libraries are loaded in HTTP instead of HTTPS. Updated version : https://jsfiddle.net/F4w92/31/ – hotips Jun 05 '15 at 14:55
1

I downvoted also as this does not work for me using latest version, had to use: $("form").data("validator").settings.ignore = ""; as other answer from @James bellow – Mark Homer Oct 09 '15 at 14:07
1

@MarkHomer, see the latest edits on my answer above. My answer exactly and correctly **addresses *only* the OP** and has nothing to do with how Microsoft's `unobtrusive-validation` plugin will interfere with the normal functioning of jQuery Validate. – Sparky Oct 09 '15 at 14:18
@Sparky OK fair enough have changed to an up vote the EDIT 2 you have added helps now. – Mark Homer Oct 09 '15 at 14:38
How do I validate just one specific hidden field but still ignore others? – eozzy Oct 31 '17 at 06:21
@3zzy, that's specifically addressed in the first EDIT above: *"how to enable validation on some hidden fields but still ignore others"* – Sparky Oct 31 '17 at 14:33
Thank you @Sparky, I have a similar problem and while the solution in your post works to trigger validation when the form is initially submitted, it does not work post-submission (i.e. it does not eagerly validate changes to the input after the form has been submitted). Here is my [question](https://stackoverflow.com/q/62607683/10841085), I would be grateful for your help as I'm new to web development and unsure of how to go about troubleshooting this. – user51462 Jun 27 '20 at 11:35

score 83 · Answer 2 · answered Jun 15 '12 at 15:01

83

This worked for me, within an ASP.NET MVC3 site where I'd left the framework to setup unobtrusive validation etc., in case it's useful to anyone:

$("form").data("validator").settings.ignore = "";

answered Jun 15 '12 at 15:01

James Morcom

1,749
14
17

2

I also like this one since it means I can do it in certain circumstances, rather than changing the default behaviour. – Steve Owen Oct 29 '12 at 15:40
6

I had to do it this way, because using .validate() to change the options wasn't working. – Farinha Apr 04 '14 at 13:01
1

this is the correct solution for the unobtrusive validation, I tried all the other solutions, they could work in case NOT using unobtrusive. If you are using unobtrusive here is right place. – Hakan Fıstık Nov 30 '16 at 08:32
Had to use this method also for unobtrusive validation to work with Bootstrap Accordion – bsod_ Jan 09 '20 at 13:36
When I change it to this the form is not validated. I use unobtrusive .net core – Offir Jun 24 '20 at 12:00
This is still the right solution for .net core 3.1 and unobtrusive validation... Thanks again. – DiscipleMichael Jul 10 '20 at 20:36

score 68 · Answer 3 · edited Nov 30 '16 at 09:27

68

Make sure to put

 $.validator.setDefaults({ ignore: '' });

NOT inside $(document).ready

edited Nov 30 '16 at 09:27

Hakan Fıstık

16,800
14
110
131

answered Apr 08 '12 at 14:05

jerick

689
5
2

2

Excellent answer. A link to the documentation is good for people to learn, but a straight up answer is more valuable imo. He OP was on the right track, but putting it outside of $(document).ready is the trick. – Kevin Zych Feb 02 '13 at 01:39
4

@KevinZych, Apparently, it makes absolutely no difference whether `$.validator.setDefaults()` is placed inside or outside of the DOM ready hander. Compare [this jsFiddle](http://jsfiddle.net/uPbmZ/) to [this jsFiddle](http://jsfiddle.net/uPbmZ/1/). – Sparky Apr 09 '13 at 20:40
Interesting @Sparky, your fiddles are excellent proof. I'd have to go back and look at the code I fixed using this solution and find out why I came to the conclusion that it had to be inside of the DOM ready handler. Must have been some other reason. – Kevin Zych Apr 10 '13 at 03:26
Justin explains why running inside doc ready causes problems. However, this answer is not a good option because it's hard to guarantee that something outside doc ready will run BEFORE doc ready. Doc.ready will not wait for scripts outside of it to run. Nothing personal, but this isn't a reliable answer. – AaronLS Sep 09 '13 at 18:55
Finally I have a answer..Thank you so much – sp9 Jul 09 '15 at 13:11
This saved me! I played with this for too long when all I needed to do was move it outside of document.ready – Brandon Lewis Apr 29 '16 at 01:33
I've been struggling with this for sometime now and this gave me the answer! Thanks! To add, I added this inside my $(document).ready and it worked perfect! Thanks again!! – AxleWack Jun 24 '16 at 09:53
Worked for me, having it outside the dom.ready, right after including the js validator script! Still don't know why! – RazvanR Nov 10 '17 at 14:36

score 31 · Answer 4 · edited Sep 09 '13 at 19:31

So I'm going to go a bit deeper in to why this doesn't work because I'm the kind of person that can't sleep at night without knowing haha. I'm using jQuery validate 1.10 and Microsoft jQuery Unobtrusive Validation 2.0.20710.0 which was published on 1/29/2013.

I started by searching for the setDefaults method in jQuery Validate and found it on line 261 of the unminified file. All this function really does is merge your json settings in to the existing $.validator.defaults which are initialized with the ignore property being set to ":hidden" along with the other defaults defined in jQuery Validate. So at this point we've overridden ignore. Now let's see where this defaults property is being referenced at.

When I traced through the code to see where $.validator.defaults is being referenced. I noticed that is was only being used by the constructor for a form validator, line 170 in jQuery validate unminified file.

// constructor for validator
$.validator = function( options, form ) {
    this.settings = $.extend( true, {}, $.validator.defaults, options );
    this.currentForm = form;
    this.init();
};

At this point a validator will merge any default settings that were set and attach it to the form validator. When you look at the code that is doing the validating, highlighting, unhighlighting, etc they all use the validator.settings object to pull the ignore property. So we need to make sure if we are to set the ignore with the setDefaults method then it has to occur before the $("form").validate() is called.

If you're using Asp.net MVC and the unobtrusive plugin, then you'll realize after looking at the javascript that validate is called in document.ready. I've also called my setDefaults in the document.ready block which is going to execute after the scripts, jquery validate and unobtrusive because I've defined those scripts in the html before the one that has the call in it. So my call obviously had no impact on the default functionality of skipping hidden elements during validation. There is a couple of options here.

Option 1 - You could as Juan Mellado pointed out have the call outside of the document.ready which would execute as soon as the script has been loaded. I'm not sure about the timing of this since browsers are now capable of doing parallel script loading. If I'm just being over cautious then please correct me. Also, there's probably ways around this but for my needs I did not go down this path.

Option 2a - The safe bet in my eyes is to just replace the $.validator.setDefaults({ ignore: '' }); inside of the document.ready event with $("form").data("validator").settings.ignore = "";. This will modify the ignore property that is actually used by jQuery validate when doing each validation on your elements for the given form.

Options 2b - After looking in to the code a bit more you could also use $("form").validate().settings.ignore = ""; as a way of setting the ignore property. The reason is that when looking at the validate function it checks to see if a validator object has already been stored for the form element via the $.data() function. If it finds a validator object stored with the form element then it just returns the validator object instead of creating another one.

your analysis helped me a lot in fixing one my validation issues. +1 — pgcan, May 03 '16 at 06:11

score 18 · Answer 5 · answered Jun 10 '16 at 06:19

This worked for me within an ASP.NET site. To enable validation on some hidden fields use this code

$("form").data("validator").settings.ignore = ":hidden:not(#myitem)";

To enable validation for all elements of form use this one $("form").data("validator").settings.ignore = "";

Note that use them within $(document).ready(function() { })

score 9 · Answer 6 · edited Nov 27 '13 at 05:24

9

Just added ignore: [] in the specific page for the specific form, this solution worked for me.

$("#form_name").validate({
        ignore: [],
        onkeyup: false,
        rules: {            
        },      
        highlight:false,
    });

edited Nov 27 '13 at 05:24

Benno

5,640
2
26
31

answered Nov 27 '13 at 04:58

Kiran

1,177
4
18
35

score 2 · Answer 7 · answered Jan 16 '17 at 02:32

2

This is working for me.

jQuery("#form_name").validate().settings.ignore = "";

answered Jan 16 '17 at 02:32

Syed Waqas Bukhary

5,130
5
47
59

score 0 · Answer 8 · answered Apr 03 '20 at 23:51

The validation was working for me on form submission, but it wasn't doing the reactive event driven validation on input to the chosen select lists.

To fix this I added the following to manually trigger the jquery validation event that gets added by the library:

$(".chosen-select").each(function() {
  $(this).chosen().on("change", function() {
    $(this).parents(".form-group").find("select.form-control").trigger("focusout.validate");
  });
});

jquery.validate will now add the .valid class to the underlying select list.

Caveat: This does require a consistent html pattern for your form inputs. In my case, each input filed is wrapped in a div.form-group, and each input has .form-control.

score -18 · Answer 9 · answered Jun 20 '13 at 12:29

-18

Just find the text ignore: ":hidden" in your jquery validation file and comment it. After comment this it will never loss any hidden elements to validate...

Thanks

answered Jun 20 '13 at 12:29

user835525

1

6

Never a good idea to just randomly comment out code in a third party library. – Jacques Oct 12 '15 at 13:45

jQuery Validate - Enable validation for hidden fields

9 Answers9

Linked

Related