Come mettere a fuoco i campi non validi con jQuery validate?

Question

L'opzione focusInvalid è true per impostazione predefinita. Ma funziona solo quando avviene la sottomissione della forma. Se convalido il modulo con il metodo valid, allora non funziona. Quindi la domanda è come mettere a fuoco il campo invalido quando si usa valid?

Vedere this demo per vedere la differenza. Basta premere i pulsanti qui.

Answer 1

Prima di tutto è necessario salvare il validatore in una variabile in modo da poter utilizzare nel gestore clic:

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

Poi nel gestore di convalida, è possibile chiamare manualmente la funzione focusInvalid dalla variabile validator :

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

     return false; 
    }); 

Example

Answer 2

Con la messa a fuoco invalidHandler è possibile impostare per la prima elem ent che fallisce: