Comment effacer les messages d'erreur de validation de jQuery ?

Question

J'utilise le plugin de validation jQuery pour la validation côté client. Fonction editUser() est appelé en cas de clic sur le bouton "Modifier l'utilisateur", qui affiche des messages d'erreur.

Mais je veux effacer les messages d'erreur sur mon formulaire, lorsque je clique sur le bouton "Effacer", qui appelle une fonction distincte. clearUser() .

function clearUser() {
    // Need to clear previous errors here
}

function editUser(){
    var validator = $("#editUserForm").validate({
        rules: {
            userName: "required"
        },
        errorElement: "span",
        messages: {
            userName: errorMessages.E2
        }
    });

    if(validator.form()){
        // Form submission code
    }
}

Answer 1

Vous voulez le resetForm() méthode :

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

Je l'ai pris à la source de une de leurs démos .

Note : Ce code ne fonctionnera pas pour Bootstrap 3.

Answer 2

J'ai moi-même rencontré ce problème. J'avais besoin de valider conditionnellement des parties d'un formulaire pendant que celui-ci était construit en fonction des étapes (c'est-à-dire que certaines entrées étaient ajoutées dynamiquement pendant l'exécution). Par conséquent, une liste déroulante de sélection devait parfois être validée, et parfois non. Cependant, à la fin de l'épreuve, elle devait être validée. Par conséquent, j'avais besoin d'une méthode robuste qui ne soit pas une solution de rechange. J'ai consulté le code source de jquery.validate .

Voici ce que j'ai trouvé :

• Effacer les erreurs en indiquant le succès de la validation
• Gestionnaire d'appel pour l'affichage des erreurs
• Effacer tout le stockage des succès ou des erreurs

• Réinitialiser toute la validation du formulaire

  Voici à quoi cela ressemble en code :

  function clearValidation(formElement){
   //Internal $.validator is exposed through $(form).validate()
   var validator = $(formElement).validate();
   //Iterate through named elements inside of the form, and mark them as error free
   $('[name]',formElement).each(function(){
     validator.successList.push(this);//mark as error free
     validator.showErrors();//remove error messages if present
   });
   validator.resetForm();//remove error class on name elements and clear history
   validator.reset();//remove all error and success data
  }
  //used
  var myForm = document.getElementById("myFormId");
  clearValidation(myForm);

  minifié comme une extension jQuery :

  $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
  //used:
  $("#formId").clearValidation();

Answer 3

Si vous voulez simplement cacher les erreurs :

$("#clearButton").click(function() {
  $("label.error").hide();
  $(".error").removeClass("error");
});

Si vous avez spécifié l'option errorClass appeler cette classe pour la cacher à la place error (le défaut) que j'ai utilisé ci-dessus.

Answer 4

Si vous n'avez pas précédemment sauvegardé les validateurs à part lors de leur attachement au formulaire, vous pouvez aussi simplement invoquer

$("form").validate().resetForm();

comme .validate() retournera les mêmes validateurs que vous avez attachés précédemment (si vous l'avez fait).

Answer 5

Malheureusement, validator.resetForm() ne fonctionne PAS, dans de nombreux cas.

J'ai un cas où, si quelqu'un appuie sur le bouton "Soumettre" d'un formulaire contenant des valeurs vides, le bouton "Soumettre" doit être ignoré. Pas d'erreur. C'est assez simple. Si quelqu'un saisit un ensemble partiel de valeurs et appuie sur "Envoyer", certains champs devraient être signalés comme contenant des erreurs. En revanche, s'il efface ces valeurs et appuie à nouveau sur "Envoyer", les erreurs devraient disparaître. Dans ce cas, pour une raison quelconque, il n'y a pas d'éléments dans le tableau "currentElements" du validateur. .resetForm() ne fait absolument rien.

Il y a des bugs postés à ce sujet.

Jusqu'à ce qu'ils les corrigent, vous devez utiliser la réponse de Nick Craver, PAS la réponse acceptée par les perroquets.