jQuery Validate Non-Visible Fields

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?

Answer

April 16, 2015

KyleMit

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>