JQuery - Form Validation - Onblur

Question

Ok I have a form with jquery validation that works but I want to take it one step further. It validates using a plug in but only on submit. I am wondering if there is a way to get it to validate on blur so a person doesn't have to wait until they hit submit to know if they have an error.

I downloaded this plugin:

http://docs.jquery.com/Plugins/Validation

I included the js plug in file at the top of the page and under that i have the js:

 <script>
  $(document).ready(function(){
    $("#formid").validate();
  });
  </script>

The validation works fine when i submit the form. I am just wondering what i need to add to this in order for it to validate each field on blur.

If you need to see the js file you can look at it or download it here

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Also at the link towards the bottom of the page there are a bunch of comments. Some of these comments reference setting up blur i just didn't understand how to do it. Thank you for any help.

Answer 1

The best way I can see is to use $.validate.element(selector) in the blur event for each element you want this behaviour for:

var v = $('#formid').validate();

Then setup blur events:

$('#firstName').blur(function(){
   v.element('#firstName'); 
});

See it in action here: http://jsfiddle.net/ryleyb/brUVZ/