CODEWITHSUNDEEP
javascriptjqueryformsvalidation
user982853
user982853

Reputation: 2488

JQuery - Form Validation - Onblur

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.

Upvotes: 5

Views: 18196

Answers (6)

NareshK
NareshK

Reputation: 43

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.

Upvotes: 0

Stephen Sprinkle
Stephen Sprinkle

Reputation: 1025

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

Upvotes: 2

Ryley
Ryley

Reputation: 21226

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/

Upvotes: 6

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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

Upvotes: 0

ori
ori

Reputation: 7847

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

Upvotes: 3

Barry Chapman
Barry Chapman

Reputation: 6780

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

Upvotes: 0

Related Questions