Jquery Validation Plugin - can you enable "eager" validation from the options?
Thanks to chaos for guidance on this question:
To enable eager validation on the jquery validation plugin, add the following option to the validate function:
$('#myform').validate({
onfocusout: function(element) {
$(element).valid();
}
});
I wanted to add to Robert's answer that you can do this in the default settings by using setDefaults()
so it doesn't rely on tapping into the actual instance of the validate method (which is not typically exposed with unobtrusive validation).
Just override the onfocusout
property with a function that always evaluates the blurred element by calling the valid()
method:
// enable eager evaluation
$.validator.setDefaults({
onfocusout: function (element) {
$(element).valid();
}
})
Demo With Eager Evaluation:
(Will show required after tab out)
// enable eager evaluation
$.validator.setDefaults({
onfocusout: function (element) {
$(element).valid();
}
});
$("form").validate();
input.error {
border-color: red
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form >
<input type="text" name="Name" required /><br/>
<input type="text" name="Email" required /><br/>
<input type="submit" value="Submit"/>
</form>
Normal Demo
(Won't show required until submit)
$("form").validate();
input.error {
border-color: red
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form >
<input type="text" name="Name" required /><br/>
<input type="text" name="Email" required /><br/>
<input type="submit" value="Submit"/>
</form>
Actually, the default behavior I get is validation on the focusout
and keyup
events, which I see in the plugin code as defaults. I have to disable those in the plugin configuration in order to only get validation at submit. Perhaps you should post some of your code... I don't think the situation is completely clear.