Cómo enfocar campos inválidos con jQuery validate?

Question

Existe la opción focusInvalid, que es true de forma predeterminada. Pero funciona solo cuando se produce el envío del formulario. Si valido el formulario con el método valid, entonces no funciona. Entonces, la pregunta es ¿cómo enfocar el campo inválido cuando se usa valid?

Consulte this demo para ver la diferencia. Simplemente presione los botones allí.

Answer 1

Primero de todo lo que necesita para guardar su validador a una variable para que pueda utilizarlo en el controlador de clic:

var validator = $("#test-form").validate({ /* settings */ }); 

A continuación, en el controlador de validación, puede llamar manualmente la función focusInvalid de la variable validator :

$("#validate").click(function() { 
     if ($("#test-form").valid()) 
       alert("Valid!"); 
     else 
       validator.focusInvalid(); 

     return false; 
    }); 

Example

Answer 2

con la invalidHandler se puede establecer el foco en el primer elem ent que falla:

$("#form").validate({ 
    onfocusout: false, 
    invalidHandler: function(form, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) {      
      validator.errorList[0].element.focus(); 
     } 
    } 
});