JQuery - Form Validation - Onblur

Question

Ok I have a jquery validation form that works, but I want to do it one more step. It checks the use of the plug-in, but only for sending. I am wondering if there is a way to get him to check for blur so that the person does not have to wait until he gets into submit in order to find out 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 below it I have js:

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

Validation works fine when I submit a form. I'm just wondering what I need to add to this so that it can check every blur field.

If you need to see the js file, you can watch it or download here.

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

. , , . .

Answer 1

, , - $.validate.element(selector) , :

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

:

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

: http://jsfiddle.net/ryleyb/brUVZ/

Answer 2

'form' , . .

:

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

, :

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

Answer 3

"validateOnBlur", , .

, #formid .

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

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

Answer 4

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

Answer 5

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

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

Answer 6

I know him already too late, but still want to add to this. A very simple way to set confirmation for send and blur:

$("#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.