Comment effacer les messages d’erreur de validation jQuery?

J’utilise le plug-in de validation jQuery pour la validation côté client. La fonction editUser() est appelée en cliquant sur le bouton ‘Edit User’, qui affiche les 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 } } 

Vous voulez la méthode resetForm() :

 var validator = $("#myform").validate( ... ... ); $(".cancel").click(function() { validator.resetForm(); }); 

Je l’ai saisi à la source d’ une de leurs démos .

Remarque: Ce code ne fonctionnera pas pour Bootstrap 3.

Je suis tombé sur ce problème moi-même. J’ai eu besoin de valider conditionnellement des parties d’un formulaire pendant la construction du formulaire en fonction des étapes (c.-à-d. Certaines entrées ont été ajoutées de manière dynamic au moment de l’exécution). Par conséquent, parfois, une liste déroulante sélective nécessiterait une validation, et parfois non. Cependant, à la fin de l’épreuve, il fallait la valider. En conséquence, j’avais besoin d’une méthode robuste qui n’était pas une solution de contournement. J’ai consulté le code source de jquery.validate .

Voici ce que j’ai imaginé:

  • Effacer les erreurs en indiquant le succès de la validation
  • Gestionnaire d’appels pour l’affichage des erreurs
  • Effacer tout stockage de succès ou d’erreurs
  • Réinitialiser la validation complète du formulaire
  • Voici à quoi ça ressemble dans le 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(); 

    Si vous voulez simplement cacher les erreurs:

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

    Si vous avez spécifié errorClass , appelez cette classe pour masquer à la place l’ error (la valeur par défaut) que j’ai utilisée ci-dessus.

    Si vous n’avez pas préalablement enregistré les validateurs lorsqu’ils sont attachés au formulaire, vous pouvez simplement simplement appeler

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

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

    Si vous voulez le faire sans utiliser une variable séparée, alors

     $("#myForm").data('validator').resetForm(); 

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

    J’ai un cas où, si quelqu’un frappe le “Soumettre” sur un formulaire avec des valeurs vides, il devrait ignorer le “Soumettre”. Pas d’erreurs C’est assez facile. Si quelqu’un introduit un ensemble partiel de valeurs et appuie sur “Soumettre”, il doit signaler certains champs avec des erreurs. Si, cependant, ils effacent ces valeurs et cliquent sur “Soumettre” à nouveau, cela devrait effacer les erreurs. Dans ce cas, pour une raison quelconque, le tableau “currentElements” ne contient aucun élément dans le validateur, par conséquent, l’exécution de .resetForm() ne fait absolument rien.

    Il y a des bugs sur ce sujet.

    Jusqu’à ce qu’ils les réparent, vous devez utiliser la réponse de Nick Craver, la réponse acceptée de PAS Parrots.

    Vous pouvez utiliser:

     $("#myform").data('validator').resetForm(); 

    Si vous voulez simplement effacer les étiquettes de validation, vous pouvez utiliser le code de jquery.validate.js resetForm ()

     var validator = $('#Form').validate(); validator.submitted = {}; validator.prepareForm(); validator.hideErrors(); validator.elements().removeClass(validatorObject.settings.errorClass); 

    Je pense que nous avons juste besoin d’entrer les entrées pour tout nettoyer

     $("#your_div").click(function() { $(".error").html(''); $(".error").removeClass("error"); }); 

    Pour ceux qui utilisent Bootstrap 3, le code ci-dessous nettoiera toute la forme: mesures, icons et couleurs …

     $('.form-group').each(function () { $(this).removeClass('has-success'); }); $('.form-group').each(function () { $(this).removeClass('has-error'); }); $('.form-group').each(function () { $(this).removeClass('has-feedback'); }); $('.help-block').each(function () { $(this).remove(); }); $('.form-control-feedback').each(function () { $(this).remove(); }); 

    J’ai testé avec:

     $("div.error").remove(); $(".error").removeClass("error"); 

    Ça va aller, quand vous devez le valider à nouveau.

     var validator = $("#myForm").validate(); validator.destroy(); 

    Cela détruira toutes les erreurs de validation

    Essayez de l’utiliser pour supprimer la validation sur le clic sur annuler

      function HideValidators() { var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>'); lblMsg.innerHTML = ""; if (window.Page_Validators) { for (var vI = 0; vI < Page_Validators.length; vI++) { var vValidator = Page_Validators[vI]; vValidator.isvalid = true; ValidatorUpdateDisplay(vValidator); } } } 

    Essayez d’utiliser:

     onClick="$('.error').remove();" 

    sur le bouton Effacer.

    Pour supprimer le résumé de validation, vous pouvez écrire ceci

    $('div#errorMessage').remove();

    Cependant, une fois que vous avez supprimé, à nouveau, si la validation a échoué, le résumé de validation ne sera pas affiché car vous l’avez supprimé. Au lieu de cela, utilisez masquer et afficher en utilisant le code ci-dessous

     $('div#errorMessage').css('display', 'none'); $('div#errorMessage').css('display', 'block'); 

    Aucune des solutions ci-dessus n’a fonctionné pour moi. J’ai été déçu de perdre mon temps sur eux. Cependant, il existe une solution simple.

    La solution a été obtenue en comparant le marquage HTML pour l’état valide et le balisage HTML pour l’état d’erreur.

    Aucune erreur ne produirait:

      

    lorsqu’une erreur se produit, cette div est remplie avec les erreurs et la classe est remplacée par validation-summary-errors:

      

    La solution est très simple. Effacez le code HTML du div qui contient les erreurs, puis remplacez la classe par l’état valide.

      $('.validation-summary-errors').html() $('.validation-summary-errors').addClass('validation-summary-valid'); $('.validation-summary-valid').removeClass('validation-summary-errors'); 

    Heureux codage

    Si vous souhaitez également réinitialiser numberOfInvalids() ajoutez la ligne suivante dans la fonction jquery.validate.js fichier jquery.validate.js : 415.

     this.invalid = {}; 

    je viens de faire

    $('.input-validation-error').removeClass('input-validation-error');

    pour supprimer la bordure rouge sur les champs d’erreur d’entrée.

    $(FORM_ID).validate().resetForm(); ne fonctionne toujours pas comme prévu.

    Je resetForm() formulaire avec resetForm() . Ca marche dans tous les cas sauf un !!

    Lorsque je charge un formulaire via Ajax et que j’applique la validation de formulaire après avoir chargé mon HTML dynamic, puis lorsque j’essaie de réinitialiser le formulaire avec resetForm() et qu’il échoue et qu’il vide toutes les validations, je l’applique aux éléments de formulaire.

    Donc, veuillez ne pas utiliser ceci pour les formulaires chargés Ajax OU la validation initialisée manuellement.

    PS Vous devez utiliser la réponse de Nick Craver pour un tel scénario, comme je l’ai expliqué.

    Dans mon cas aidé avec l’approche:

     $(".field-validation-error span").hide(); 

    Si vous souhaitez masquer une validation côté client qui ne fait pas partie d’un envoi de formulaire, vous pouvez utiliser le code suivant:

     $(this).closest("div").find(".field-validation-error").empty(); $(this).removeClass("input-validation-error"); 

    méthode validator.resetForm() efface le texte d’erreur. Mais si vous voulez supprimer la bordure ROUGE des champs, vous devez supprimer la classe has-error

     $('#[FORM_ID] .form-group').removeClass('has-error');