Comment effacer les messages d'erreur de validation jQuery?

Je suis tombé sur ce problème moi-même. J'avais besoin de valider conditionnellement des parties d'un formulaire pendant que le formulaire était construit en fonction des étapes (c'est-à-dire que certaines entrées étaient ajoutées dynamiquement pendant l'exécution). Par conséquent, parfois une liste déroulante select aurait besoin d'une validation, et parfois ce ne serait pas le cas. Cependant, à la fin de l'épreuve, elle devait être validée. 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 pour jquery.validate.

Voici ce que je venu avec:

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);

$.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 masquer les erreurs:

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

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

Si vous n'avez pas précédemment sauvegardé les validateurs en les attachant au formulaire, vous pouvez simplement appeler

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

As {[1] } renverra les mêmes validateurs que vous avez attachés précédemment (si vous l'avez fait).

Si vous voulez le faire sans utiliser de variable distincte, 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 doit ignorer les "Soumettre."Pas d'erreur. C'est assez facile. Si quelqu'un met dans un ensemble partiel de valeurs, et frappe "Submit", il devrait marquer certains des champs avec des erreurs. Si, cependant, ils effacent ces valeurs et cliquent à nouveau sur "Soumettre", cela devrait effacer les erreurs. Dans ce cas, pour une raison quelconque, il n'y a pas d'éléments dans le " courantéléments" tableau dans le validateur, donc l'exécution de .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 de perroquets.

Vous pouvez utiliser:

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

Si vous voulez simplement effacer les étiquettes de validation, vous pouvez utiliser le code de jquery.valider.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 le code Bootstrap 3 ci-dessous nettoiera la forme entière: meassages, icônes 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");

Ce sera ok, quand vous aurez besoin de 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é, encore une fois si la validation a échoué, il n'affichera pas ce résumé de validation parce que vous l'avez supprimé. Utilisez plutôt 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 facile.

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

Aucune erreur ne produirait:

        <div class="validation-summary-valid" data-valmsg-summary="true"></div>

Lorsqu'une erreur se produit, ce div est rempli avec les erreurs et la classe est changée en validation-summary-errors:

        <div class="validation-summary-errors" data-valmsg-summary="true"> 

La solution est très simple. Effacer le code HTML de la div qui contient les erreurs et ensuite changer la classe à l'état valide.

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

Bon codage.

Si vous souhaitez réinitialiser numberOfInvalids(), ajoutez la ligne suivante dans la fonction resetForm dans le numéro de ligne du fichier jquery.validate.js: 415.

this.invalid = {};

Je viens de le 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.

J'efface le formulaire avec resetForm(). Cela fonctionne dans tous les cas sauf un!!

Lorsque je charge un formulaire via Ajax et applique la validation du formulaire après avoir chargé ma dynamique HTML, puis après quand j'essaie de réinitialiser le formulaire avec resetForm() et il échoue et aussi il a vidé toute validation que j'applique sur les éléments de formulaire.

Veuillez donc ne pas l'utiliser pour les formulaires chargés Ajax ou la validation initialisée manuellement.

P. S., 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 formulaire de soumission, vous pouvez utiliser le code suivant:

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

validator.resetForm() Méthode effacer 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');