JQuery Validate: Validating a hidden form (possible bug)

Question

I am using the JQuery Validation plugin to handle form validation.

The problem I am having is that when a form is hidden, the validation plugin ignores the fields that need to be validated and jumps straight to submitting the form.

Example: http://jsfiddle.net/Qg5WQ/

I have had a look through the plugin's options and googled this issue but I cannot find anything that specifies why fields within a hidden form are ignored.

It is worth noting that if there are two forms on a page, where one is hidden and one is displayed, that both forms are successfully validated if both forms use the same validation method. However, if you call two seperate validation methods then the fields within the hidden form are still ignored.

Validating two forms using the same validation function: http://jsfiddle.net/Qg5WQ/1/

Validating two forms using different validation functions: http://jsfiddle.net/Qg5WQ/2/

Does anyone know if this is a bug or is there a specific way to validate hidden forms?

i am facing the same issues, so i am making my own code to validate the form. (when i am in .aspx webform) — manny
– manny, Commented Dec 15, 2011 at 11:47

Cyclonecode · Accepted Answer · 2014-09-22 18:11:55Z

11

Try this http://jsfiddle.net/Qg5WQ/3/

I added the ignore : hidden option to the validate call.

$("form").validate({
  ignore: 'hidden',
  rules: {
    "first": "required"
  },
  invalidHandler: function() {
    alert("error");   
  },
  submitHandler: function( form ) {
    alert("no error");
  }
});

edited Sep 22, 2014 at 18:11

answered Dec 15, 2011 at 11:25

Cyclonecode

30.4k11 gold badges77 silver badges97 bronze badges

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

3 Comments

My Head Hurts Over a year ago

Thanks, that oddly does work. I seem to be able to add anything into the ignore field and it works. I guess this must force it to iterate through the fields which makes me think that this must be a bug. Thanks for the help!

Cyclonecode Over a year ago

@MyHeadHurts - Yes, I noticed that, very strange, but good it works anyway=)

Dominic Over a year ago

Just a quick note that the reason this works is because you're missing the colon from the front of :hidden. You're essentially telling it to ignore any html <hidden> tags that may exist rather than telling it to ignore inputs of type hidden.

Dominic · Accepted Answer · 2012-05-15 02:37:07Z

7

If you check out the ignore option on the documentation page, it says that the default value is :hidden. This obviously means that if you don't specify the ignore option explicitly, the validation will ignore hidden inputs.

Simply define the ignore option (it can be left blank) and it should fix the problem.

$("form").validate({
  ignore: '',
  rules: {"hidden_field": {required:true}}
});

edited May 15, 2012 at 2:37

answered May 15, 2012 at 2:30

Dominic

4195 silver badges10 bronze badges

1 Comment

My Head Hurts Over a year ago

+1 - thanks, that explains why adding anything into ignore still worked

Collectives™ on Stack Overflow

JQuery Validate: Validating a hidden form (possible bug)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related