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?

Answer 1

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");
  }
});