JQuery - Validación de formulario - Onblur

Question

Ok Tengo un formulario con validación jquery que funciona pero quiero dar un paso más. Valida el uso de un complemento, pero solo en el envío. Me pregunto si hay una forma de que valide la borrosidad para que una persona no tenga que esperar hasta que llegue a enviar para saber si tiene un error.

He descargado este plugin:

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

que incluía el js enchufar archivo en la parte superior de la página y en virtud de que tengo la JS:

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

La validación funciona bien cuando envío el formulario Me pregunto qué debo agregar a esto para que valide cada campo en desenfoque.

Si necesita ver el js archivo que puede mirarlo o descargarlo aquí

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

También en el enlace hacia la parte inferior de la página hay un montón de comentarios. Algunos de estos comentarios hacen referencia a la configuración de desenfoque, simplemente no entendí cómo hacerlo. Gracias por cualquier ayuda.

Answer 1

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

Answer 2

Usted puede utilizar el método de validación 'forma', véase documentation.

Esto desencadena la validación de formularios:

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

Si desea que el desenfoque puede utilizar esta:

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

Answer 3

debe establecer el onfocusout option true (desplazarse hacia abajo para verlo)

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

Answer 4

La mejor manera que puedo ver es usar $.validate.element(selector) en el evento blur para eac h elemento que desea este comportamiento para:

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

Entonces eventos configuración de desenfoque:

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

verlo en acción aquí: http://jsfiddle.net/ryleyb/brUVZ/

Answer 5

La versión actual del plugin tiene una función llamada 'validateOnBlur 'que hará lo que estás pidiendo.

Su código debe verse así si ha aplicado la identificación de #formid al formulario.

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

Por alguna documentación sólida sobre este punto a su página de GitHub - https://github.com/victorjonsson/jQuery-Form-Validator

Answer 6

Sé que es ya demasiado tarde, pero aún quiero añadir a esto. Una manera muy fácil de configurar la validación para presentar y desenfoque evento es:

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

darle una oportunidad.