web-dev-qa-db-fra.com

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 "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", cela 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
    }
}
jqueryjquery-validate
154
Vicky

Vous voulez la méthode resetForm():

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

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

Je l'ai saisi à la source de l'un de leurs démos .

Remarque: Ce code ne fonctionnera pas pour Bootstrap 3.

186
Parrots

Je suis tombé sur ce problème moi-même. J'avais besoin de valider de manière conditionnelle des parties d'un formulaire pendant la construction du formulaire en fonction d'étapes (c'est-à-dire que certaines entrées étaient ajoutées dynamiquement pendant l'exécution). En conséquence, une liste déroulante sélectionnée nécessitait parfois une validation, et parfois non. Cependant, à la fin de l'épreuve, il devait être validé. En conséquence, j'avais besoin d'une méthode robuste qui ne soit pas une solution de contournement. J'ai consulté le code source pour jquery.validate. 

Voici ce que je suis venu avec:

  • Effacer les erreurs en indiquant le succès de la validation
  • Gestionnaire d'appels pour l'affichage d'erreur
  • 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);

    minified 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();
    • 114
    Travis J

    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 error (la valeur par défaut) que j'ai utilisée ci-dessus.

    55
    Nick Craver

    Si vous n’aviez pas précédemment enregistré les validateurs en les attachant au formulaire, vous pouvez simplement simplement appeler

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

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

    34
    Juri

    Si vous voulez le faire sans utiliser de variable distincte, alors

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

    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 facile. Si quelqu'un définit un ensemble partiel de valeurs et clique sur «Soumettre», il doit marquer certains champs avec des erreurs. Si, toutefois, 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" du validateur. L'exécution de .resetForm() ne fait donc absolument rien.

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

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

    16
    Meower68

    Vous pouvez utiliser:

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

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

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

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

    Pour ceux qui utilisent Bootstrap 3, le code ci-dessous nettoie 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(); });
    4
    Xawery Wiśniowiecki

    J'ai testé avec:

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

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

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

    Cela détruira toutes les erreurs de validation 

    1
    kiran

    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 parfois que ce ne soit pas le cas, mais simplement de supprimer les erreurs. Ce qui a finalement fonctionné pour moi est la suivante:

    validator.hideThese(validator.errors());
    1
    jlh

    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);
                }
            } 
        }
    0
    sunny goyal

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

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

    Cependant, une fois que vous avez supprimé, si la validation échoue, le résumé de la validation ne s'affiche pas 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
    shathar khan

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

    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 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 survient, cette div est renseignée 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. Efface le code HTML de la div qui contient les erreurs, puis rétablit l'état valide de la classe.

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

    Bonne codage.

    0
    peter the programming god

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

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

    En utilisant:

    jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/
    0
    Artur Kędzior

    Dans mon cas, aidé avec l'approche:

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

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

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

    Je viens de faire

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

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

    0
    michaelhsilva9944

    $(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 applique la validation de formulaire après le chargement de ma variable dynamique HTML, puis après lorsque j'essaie de réinitialiser le formulaire avec resetForm(), il échoue et supprime également toute la validation appliquée aux éléments de formulaire.

    Donc, ne l'utilisez pas pour les formulaires chargés Ajax OR initialisés manuellement.

    P.S. Vous devez utiliser Nick Craver answer pour un tel scénario, comme je l'ai expliqué.

    0
    Parixit

    Essayez d'utiliser:

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

    sur le bouton Clear.

    0
    ZhukovRA

    Si vous souhaitez également 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 = {};
    0
    Maximus

    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
    Eduardo Lucio