You can enable eager evaluation by using setDefaults()
to override the onfocusout
property with a function that always evaluates the blurred element by calling the valid()
method.
<!-- language: lang-js -->
// enable eager evaluation
$.validator.setDefaults({
onfocusout: function (element) {
$(element).valid();
}
})
Demo With Eager Evaluation:
<sup>(Will show required after tab out)</sup>
<!-- begin snippet: js hide: true -->
<!-- language: lang-js -->
// enable eager evaluation
$.validator.setDefaults({
onfocusout: function (element) {
$(element).valid();
}
});
$("form").validate();
<!-- language: lang-css -->
input.error {
border-color: red
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Normal Demo
<sup>(Won't show required until submit)</sup>
<!-- begin snippet: js hide: true -->
<!-- language: lang-js -->
$("form").validate();
<!-- language: lang-css -->
input.error {
border-color: red
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->