jQuery Validate Non-Visible Fields

Question

I've seen bunches of questions about this, but wanted to clarify my understanding. It all started when I was setting up jQuery validation on a popup form. If I added the validate() method while the form wasn't visible, the validation didn't work (straight submit). If I added validation after the form element was visible, all is well... the validate fires and doesn't submit the form.

So, I tried to isolate this behavior and this is what I ended up with:

https://jsfiddle.net/KyleMit/ph8ue5j5/

Here's the HTML:

<form id="form" style="display: none;">
    <input type="text" name="name" id="name"  placeholder="Name" required="requited" /><br/>
    <input id="submit" class="button" type="submit" value="submit"/>
</form>

Here's the JS:

$(function() {

    $('#form').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Name should be more than 2 characters"
            }
        }
    });

    window.setTimeout(function() {
        $("#form").show() 
    }, 3000);

});

If you run this, you will see the form is first invisible. Then after 3 seconds, becomes visible. This is the same setup as my popup form.

What surprises me is the validations works! This goes against what I have been reading and what I've witnessed in my web project.

Can anyone explain this?

The behaviour is a little odd, but you can force the hidden fields to be included in the validator by setting ignore: ''. By default it is set to ignore: ':hidden' — Rory McCrossan
– Rory McCrossan, Commented Apr 16, 2015 at 20:00
I like the question, but as a friendly reminder, please try to distill your question to the minimum amount of code you need so it's easier for other people to jump on board and helps clearly communicate your point. Here's a fiddle that just contains a single field and still accomplishes the same validation scenario. jsfiddle.net/KyleMit/ph8ue5j5 — KyleMit
– KyleMit ♦, Commented Apr 16, 2015 at 20:12
@RoryMcCrossan, the issue has nothing to do with validating hidden fields. I think he wants to know why he is able to initialize the plugin on a hidden form, which is a slightly different scenario. — Sparky
– Sparky, Commented Apr 16, 2015 at 21:39
Why are you using jQuery 1.6 in your demo? That may explain a few things. — Sparky
– Sparky, Commented Apr 16, 2015 at 21:51

Community · Accepted Answer · 2017-05-23 12:09:26Z

4

It depends on which version you're using. As of version 1.9.0, ignore: ":hidden" is the default option, so it doesn't need to be set explicitly. Depending on when you were looking at answers or which version you were using, you might see different answers.

In your example, you're using v1.11.0, so hidden elements should be ignored by default. The :hidden selector includes elements that:

have a display value of none.

are form elements with type="hidden".

have width and height are explicitly set to 0.

have an hidden ancestor, so the element is not shown on the page.

If you want to change that, you need to pass in a different value for ignore in the options object.

The point that seems to be causing confusion is at what point the validation check if an element is hidden. When a form submits, jQuery-Validate will re-check any inputs. It's at that point that elements in your ignore will be chosen or not. So if an element is visible by the time you're hitting submit, it will be validated.

Try running the sample below. If you submit before the first element has a chance to load, you'll only get a single warning, even though both inputs are required, because the first one is excluded because it's hidden. Wait until the script shows the first input and try to submit again, and both elements will be included.

Demo in Stack Snippet

$(function() {
    
    $('#form').validate({
      ignore: ':hidden'
    });
    
    window.setTimeout(function() {
        $('.hidden').show() 
    }, 4000);
    
});

.hidden {
  display: none;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>

<form id="form" >
  <input type="text" id="hidden"  name="hidden" placeholder="Originally Hidden" required="required" class="hidden" /><br/>
  <input type="text" id="visible" name="visible" placeholder="Originally Visible" required="required" /><br/>
  <input type="submit" id="submit" value="submit"/>
</form>

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 16, 2015 at 20:18

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swisher Sweet Over a year ago

Thanks for the detailed answer and example. What I'm seeing in my project is if the form is hidden when the validate() method is called, and the form becomes visible, it still won't validate. But if I call the validate() method after the form is visible, it works. I'll need to verify my jquery version later as I don't have access to that code right now.

Sparky Over a year ago

As long as the form's HTML exists when you call .validate(), everything is initialized and ready to go. The fact that hidden fields are ignored by default is a separate issue.

Sparky · Accepted Answer · 2015-04-16 22:02:07Z

"This goes against what I have been reading and what I've witnessed in my web project."

Unfortunately, you did not provide an example of this alternative behavior you're describing. We can only see your demo, which is working exactly as designed.

Can anyone explain this?

Not until you show us the broken version.

$('#form').validate({ ....

You can attach the .validate() method to a hidden form and the plugin will be ready to validate this form. As long as the HTML exists when you call .validate(), the plugin is initialized and ready for form validation.
If the form fields are hidden OR if the form fields are inside a hidden container, there will be no validation on these fields. HOWEVER, this will not prevent you from initializing the plugin on the form as described in #1 above. Simply making the fields visible (in this case the whole form) allows them to be validated.
You can optionally validate hidden fields by setting the ignore option to []. However, I don't believe you're asking about how to validate hidden fields.

Quote OP Comment:

What I'm seeing in my project is if the form is hidden when the validate() method is called, and the form becomes visible, it still won't validate. But if I call the validate() method after the form is visible, it works.

The demo you've provided is showing the exact opposite of what you describe.

My demo below is a variation of yours. The .validate() method is attached to a hidden form. Then when you click the button to show the form... validation is already working.

DEMO: https://jsfiddle.net/1v35f7L2/1/

FWIW, make sure you're using the latest version of jQuery and the jQuery Validate plugin. Your demo is using jQuery 1.6, which is several years old and jQuery Validate 1.11, which is also a little old.

Collectives™ on Stack Overflow

jQuery Validate Non-Visible Fields

2 Answers 2

Demo in Stack Snippet

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo in Stack Snippet

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related