Jquery Validation Plugin - can you enable “eager” validation from the options?

Question

I\'m using the Jquery Validation plugin on a project.

By default, the plugin validates input when the submit button is clicked. The behavior is \"lazy\" in order to

Answer 1

For me adding the onfocusout was also not working. I have tried to add it via setDefaults like suggested by KyleMit and via $('#myform').validate.

The solution that I finally have used is to add an extra event on keyup, blur and change for the different fields of my form. I have used a class instead of an id to keep the logic generic.

$('body').on('keyup blur change', '.tovalidate input, .tovalidate select, .tovalidate textarea', function () { 
        $('.tovalidate').validate().checkForm(); 
});

Answer 2

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.

Answer 3

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>

Answer 4

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