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/

Answer 2

You can use the validator 'form' method, see documentation .

This triggers form validation:

$('#formid').validate().form();

If you want it on blur you might use this:

$('#formid :input').blur(function() {
    $('#formid').validate().form();
});

Answer 3

The current version of the plugin has a function called 'validateOnBlur' which will do what you're asking.

Your code should look like this if you've applied the id of #formid to the form.

<script>
  $('#formid').validateOnBlur();
</script>

For some solid documentation on this head to his github page -- https://github.com/victorjonsson/jQuery-Form-Validator

Answer 4

I know its already too late but still I want to add to this. Very easy way to set the validation for submit and blur event is:

$("#MainForm").validate({
            onfocusout: function (element) {                    
                if ($(element).valid())
                {
                    $(element).removeClass('input-error').addClass('input-valid');
                }
            },                

            invalidHandler: function (event, validator) {
                $.each(validator.errorList, function (index, error) {
                    $(error.element).addClass('input-error');
                });
            },

            showErrors: function () {
                //This function is kept blank so as to hide the default validation messages.
            }
        });

CSS

.input-error {
    border-color: #FF1919;
    box-shadow: 0px 0px 10px #FF1919;
}
.input-valid {
    border-color:#009500;
    box-shadow: 0px 0px 10px #009500;
}

Give it a try.

Answer 5

<script>
  $(document).ready(function(){
    $("#formid input, #formid select, #formid textarea").blur(function() { $('#formid').validate(); });
  });
</script>

Answer 6

You should set the onfocusout option to true (scroll down to see it)

$("#formid").validate({
    rules: {
        // simple rule, converted to {required:true}
        required: "required",
    },
    onfocusout: true
});