Comment effacer les messages d'erreur de validation jQuery?


169

J'utilise le plugin de validation jQuery pour la validation côté client. La fonction editUser()est appelée en cliquant 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
    }
}

Réponses:


209

Vous voulez la resetForm()méthode:

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

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

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

Remarque: ce code ne fonctionnera pas pour Bootstrap 3.


31
Pour ceux qui utilisent bootstrap, il existe des cas où resetForm()ne supprime pas toutes les instances de .errorsur les éléments enfants du formulaire. Cela laissera du CSS résiduel comme la couleur du texte rouge à moins que vous n'appeliez .removeClass(). Exemple:$('#myform .control-group').removeClass('error');
jlewkovich

14
L'utilisation de bootstrap 3 ne masque pas les erreurs de validation de champ. C'est dommage.
The Muffin Man

2
Cela fonctionne pour moi avec Bootstrap 3. Peut-être que le problème vient de votre intégration des deux bibliothèques?
bernie

3
Non, ce resetForm va même littéralement reposer les données du formulaire.
Codemole

ce que @JLewkovich dit en utilisant bootstrap3 est vrai, doit implémenter une réinitialisation manuelle en sautant dans l'inspecteur et en déterminant quelles classes s'appliquent aux erreurs
Nestor Colt

126

Je suis tombé sur ce problème moi-même. J'ai eu le besoin de valider conditionnellement des parties d'un formulaire pendant que le formulaire était en cours de construction en fonction des étapes (c'est-à-dire que certaines entrées étaient ajoutées dynamiquement pendant l'exécution). En conséquence, une liste déroulante de sélection nécessiterait parfois une validation, et parfois non. Cependant, à la fin de l'épreuve, il fallait le 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 pour jquery.validate.

Voici ce que j'ai trouvé:

  • Effacer les erreurs en indiquant le succès de la validation
  • Gestionnaire d'appels pour l'affichage des erreurs
  • Effacer tout le stockage des succès ou des erreurs
  • Réinitialiser la validation complète du formulaire

    Voici à quoi cela 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é en tant qu'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();
    

  • 2
    thats great, cette solution fonctionne également avec "ValidationMessageFor"
    Syed Ali

    1
    Génial! Fonctionne parfaitement avec Bootstrap et MVC!
    swissben

    2
    Tout d'abord, merci! Cela fonctionnait très bien pendant des années, mais maintenant j'ai découvert un problème de performance: showErrorsfait une manipulation DOM et il est appelé pour chaque élément du formulaire. Le navigateur s'est figé pendant quelques secondes lors de l'utilisation de ce code sur un formulaire avec ~ 30 contrôles. La solution pour moi était de showErrorssortir de la boucle et de l'appeler une fois juste avant validator.resetForm. Pour autant que je sache, il se comporte exactement de la même manière et est beaucoup plus rapide.
    Michael Sandino

    Je l'utilise jusqu'à aujourd'hui et j'ai trouvé que si j'utilise cette méthode sur le bouton "Reset", cela supprime toutes les erreurs mais il n'y a plus de validation ... même si j'essaye de valider à nouveau, tout est valide
    Savandy

    58

    Si vous souhaitez simplement masquer les erreurs:

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

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


    2
    @mark - correct, mais il n'est pas conçu pour ... ils ne sont toujours pas valides, nous masquons simplement les messages d'erreur dans ce cas. C'est une alternative à la réponse acceptée pour les cas où vous souhaitez spécifiquement masquer (ne pas ignorer, par exemple interdire la soumission) les erreurs. Cela revient plus souvent que vous ne le pensez :)
    Nick Craver

    1
    Le problème est lorsque vous réinitialisez le formulaire et le modifiez à nouveau. Ma boîte de dialogue d'erreur affiche le nombre d'erreurs et le nombre continue de se résumer. Même «resetForm» n'aide pas.
    marque le

    1
    Même moi, je l'ai fait, mais cela conduit à un autre problème. Les validations ne s'appliquent pas la prochaine fois que la boîte de dialogue s'ouvre!
    Vandesh

    Cette technique a fonctionné pour moi sur un site Web Bootstrap 3. Juste eu à modifier la classe d'erreur comme suit: $(".has-error").removeClass("has-error");
    Myke Black

    42

    Si vous n'avez pas précédemment enregistré les validateurs séparément lorsque vous les attachez au formulaire, vous pouvez également simplement appeler

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

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


    25

    Si vous souhaitez le faire sans utiliser de variable distincte,

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

    18

    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». Aucune erreur. C'est assez simple. Si quelqu'un insère un ensemble partiel de valeurs et clique sur «Soumettre», il doit signaler certains 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 aucun élément dans le tableau "currentElements" dans le validateur, donc l'exécution .resetForm()ne fait absolument rien.

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

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


    Ce n'est que dans le monde JavaScript que cet état de fait est acceptable.
    StackOverthrow


    6

    Je pense qu'il faut juste entrer les entrées pour tout nettoyer

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

    5

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

    4

    Pour ceux qui utilisent Bootstrap 3, le code ci-dessous nettoiera tout le formulaire: messages, 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(); });

    3

    J'ai testé avec:

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

    Ce sera ok, lorsque vous aurez besoin de le valider à nouveau.


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

    Cela détruira toutes les erreurs de validation


    1

    Dans mon cas, aidé à l'approche:

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

    Aucune des autres réponses n'a fonctionné, mais votre réponse a bien fonctionné, Merci
    Arash.Zandi

    1

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

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

    1

    J'ai essayé chaque réponse. La seule chose qui a fonctionné pour moi était:

    $("#editUserForm").get(0).reset();

    En utilisant:

    jquery-validate/1.16.0
    
    jquery-validation-unobtrusive/3.2.6/

    1

    Aucune des autres solutions n'a fonctionné pour moi. resetForm()est clairement documenté pour réinitialiser le formulaire réel, par exemple supprimer les données du formulaire, ce qui n'est pas ce que je veux. Il arrive juste parfois de ne pas faire cela, mais simplement de supprimer les erreurs. Ce qui a finalement fonctionné pour moi, c'est ceci:

    validator.hideThese(validator.errors());

    0

    Essayez de l'utiliser pour supprimer la validation en cliquant 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);
                    }
                } 
            }

    Cette fonction fonctionne sur le bouton d'annulation et où vous voulez utiliser celui-ci est bon.essayez-le
    sunny goyal

    0

    Essayez d'utiliser:

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

    sur le bouton Effacer.


    0

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

    0

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

    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 modifiée en validation-summary-errors:

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

    La solution est très simple. Effacez le code HTML du div qui contient les erreurs, puis remettez 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.


    0

    Si vous souhaitez également réinitialiser, numberOfInvalids()ajoutez la ligne suivante dans la resetFormfonction dans jquery.validate.jsle numéro de ligne du fichier: 415.

    this.invalid = {};

    0

    je viens de faire

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

    pour supprimer la bordure rouge sur les champs d'erreur de saisie.


    0

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

    Je nettoie le formulaire avec resetForm(). Cela fonctionne dans tous les cas sauf un !!

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

    Alors veuillez ne pas l'utiliser 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é.


    0

    validator.resetForm()texte d'erreur clair de la méthode. Mais si vous souhaitez supprimer la bordure ROUGE des champs, vous devez supprimer la classehas-error

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

    0

    Fonction utilisant les approches de Travis J , JLewkovich et Nick Craver ...

    // NOTE: Clears residual validation errors from the library "jquery.validate.js". 
    // By Travis J and Questor
    // [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
    function clearJqValidErrors(formElement) {
    
        // NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
        var validator = $(formElement).validate();
    
        // NOTE: Iterate through named elements inside of the form, and mark them as 
        // error free. By Travis J
        $(":input", formElement).each(function () {
        // NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
        // [Refs.: https://stackoverflow.com/a/12862623/3223785 , 
        // https://api.jquery.com/input-selector/ ]
    
            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
    
        // NOTE: For those using bootstrap, there are cases where resetForm() does not 
        // clear all the instances of ".error" on the child elements of the form. This 
        // will leave residual CSS like red text color unless you call ".removeClass()". 
        // By JLewkovich and Nick Craver
        // [Ref.: https://stackoverflow.com/a/2086348/3223785 , 
        // https://stackoverflow.com/a/2086363/3223785 ]
        $(formElement).find("label.error").hide();
        $(formElement).find(".error").removeClass("error");
    
    }
    
    clearJqValidErrors($("#some_form_id"));

    0

    Écrivez votre propre code car tout le monde utilise un nom de classe différent. Je réinitialise la validation jQuery par ce code.

    $('.error').remove();
            $('.is-invalid').removeClass('is-invalid');
    En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
    Licensed under cc by-sa 3.0 with attribution required.