Comment concentrer les champs invalides avec jQuery valider?

Question

Il y a l'option focusInvalid , qui est true par défaut. Mais cela ne fonctionne que lorsque la soumission du formulaire se produit. Si je valide le formulaire avec la méthode valid , cela ne fonctionne pas. La question est donc de savoir comment concentrer un champ invalide lorsque valid est utilisé?

Veuillez voir cette démo pour voir la différence. Appuyez simplement sur les boutons.

Answer 1

Tout d'abord, vous devez enregistrer votre validateur dans une variable afin de pouvoir l'utiliser dans le gestionnaire de clics:

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

Ensuite, dans le gestionnaire de validation, vous pouvez appeler manuellement la fonction focusInvalid à partir de la variable validator:

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

        return false;
  });

Exemple

Answer 2

Avec le invalidHandler, vous pouvez définir le focus sur le premier élément qui échoue:

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