Comment effacer les messages d'erreur de validation jQuery?

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
    }
}

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.

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é:

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 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.

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

Si vous souhaitez le faire sans utiliser de variable distincte,

$("#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». 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.

Vous pouvez utiliser:

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

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

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

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

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

J'ai testé avec:

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

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

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

Cela détruira toutes les erreurs de validation

Dans mon cas, aidé à l'approche:

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

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

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/

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

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

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

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.

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 = {};

je viens de faire

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

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

$(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é.

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

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

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