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?
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");
}
});
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}}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With