Wie lösche ich Fehlermeldungen zur jQuery-Validierung?

168

Ich verwende das jQuery-Validierungs-Plugin für die clientseitige Validierung. Die Funktion editUser()wird durch Klicken auf die Schaltfläche 'Benutzer bearbeiten' aufgerufen, wodurch Fehlermeldungen angezeigt werden.

Ich möchte jedoch Fehlermeldungen in meinem Formular löschen, wenn ich auf die Schaltfläche "Löschen" klicke, die eine separate Funktion aufruft 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
    }
}
Vicky
quelle

Antworten:

209

Sie möchten die resetForm()Methode:

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

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

Ich habe es aus der Quelle einer ihrer Demos geholt .

Hinweis: Dieser Code funktioniert nicht für Bootstrap 3.

Papageien
quelle
31
Für Benutzer von Bootstrap gibt es Fälle, in denen resetForm()nicht alle Instanzen .errorder untergeordneten Elemente des Formulars gelöscht werden. Dadurch verbleibt CSS-Reste wie rote Textfarbe, sofern Sie nicht anrufen .removeClass(). Beispiel:$('#myform .control-group').removeClass('error');
Jlewkovich
14
Mit Bootstrap 3 werden die Feldüberprüfungsfehler nicht ausgeblendet. Schade.
Der Muffin-Mann
2
Es funktioniert bei mir mit Bootstrap 3. Vielleicht liegt das Problem bei Ihrer Integration beider Bibliotheken?
Bernie
3
Nein, diese resetForm wird buchstäblich auch die Formulardaten ruhen lassen.
Codemole
Was @JLewkovich sagt, dass die Verwendung von Bootstrap3 wahr ist, muss ein manuelles Zurücksetzen implementieren, indem man in den Inspektor springt und herausfindet, welche Klassen auf Fehler angewendet werden
Nestor Colt
126

Ich bin selbst auf dieses Problem gestoßen. Ich musste Teile eines Formulars bedingt validieren, während das Formular basierend auf Schritten erstellt wurde (dh bestimmte Eingaben wurden zur Laufzeit dynamisch angehängt). Infolgedessen muss manchmal ein ausgewähltes Dropdown validiert werden, manchmal nicht. Am Ende der Tortur musste sie jedoch validiert werden. Daher brauchte ich eine robuste Methode, die keine Problemumgehung darstellte. Ich habe den Quellcode für konsultiertjquery.validate .

Folgendes habe ich mir ausgedacht:

  • Löschen Sie Fehler, indem Sie den Validierungserfolg anzeigen
  • Rufen Sie den Handler zur Fehleranzeige auf
  • Löschen Sie alle Speicher für Erfolg oder Fehler
  • Setzen Sie die gesamte Formularvalidierung zurück

    So sieht es im Code aus:

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

    als jQuery-Erweiterung minimiert:

    $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
    //used:
    $("#formId").clearValidation();
  • Travis J.
    quelle
    2
    Das ist großartig, diese Lösung funktioniert auch mit "ValidationMessageFor"
    Syed Ali
    1
    Toll! Funktioniert perfekt mit Bootstrap und MVC!
    Schweizer
    2
    Zunächst einmal vielen Dank! Hatte dies jahrelang großartig funktioniert, aber jetzt habe ich ein Leistungsproblem entdeckt: showErrorsführt einige DOM-Manipulationen durch und es wird für jedes Element in der Form aufgerufen. Der Browser blieb einige Sekunden lang stehen, wenn dieser Code in einem Formular mit ~ 30 Steuerelementen verwendet wurde. Die Lösung für mich war, showErrorsaus der Schleife herauszukommen und sie einfach einmal vorher aufzurufen validator.resetForm. Soweit ich das beurteilen kann, verhält es sich genauso und ist viel schneller.
    Michael Sandino
    Ich habe dies bis heute benutze , dass ich festgestellt , dass , wenn ich diese Methode auf dem „Reset“ -Taste verwenden, sie alle Fehler beseitigt , aber es gibt keine Validierung mehr ... selbst wenn ich wieder zu bestätigen versuchen, alles gleich und gültig ist
    Savandy
    57

    Wenn Sie die Fehler einfach ausblenden möchten:

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

    Wenn Sie das angegeben haben errorClass, rufen Sie diese Klasse auf, um sie stattdessen auszublenden error(die Standardeinstellung), die ich oben verwendet habe.

    Nick Craver
    quelle
    2
    @mark - richtig, aber es ist nicht dafür ausgelegt ... sie sind immer noch ungültig, wir verstecken in diesem Fall nur die Fehlermeldungen. Dies ist eine Alternative zur akzeptierten Antwort für Fälle, in denen Sie die Fehler speziell ausblenden (nicht ignorieren, z. B. die Übermittlung nicht zulassen) möchten. Es kommt öfter vor, als du denkst :)
    Nick Craver
    1
    Das Problem ist, wenn Sie das Formular zurücksetzen und erneut bearbeiten. Mein Fehlerdialog zeigt die Anzahl der Fehler an und die Anzahl wird immer wieder zusammengefasst. Auch 'resetForm' hilft nicht.
    markieren
    1
    Sogar ich habe das getan, aber es führt zu einem anderen Problem. Die Validierungen gelten nicht, wenn der Dialog das nächste Mal geöffnet wird!
    Vandesh
    Diese Technik hat bei mir auf einer Bootstrap 3-Website funktioniert. $(".has-error").removeClass("has-error");
    Myke Black
    42

    Wenn Sie die Validatoren beim Anhängen an das Formular zuvor nicht getrennt gespeichert haben, können Sie sie auch einfach aufrufen

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

    as .validate()gibt dieselben Validatoren zurück, die Sie zuvor angehängt haben (falls Sie dies getan haben).

    Juri
    quelle
    24

    Wenn Sie dies ohne Verwendung einer separaten Variablen tun möchten, dann

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

    Funktioniert leider validator.resetForm()in vielen Fällen NICHT.

    Ich habe einen Fall, in dem jemand, der in einem Formular mit leeren Werten auf "Senden" klickt, das "Senden" ignorieren sollte. Keine Fehler. Das ist einfach genug. Wenn jemand einen Teilsatz von Werten eingibt und auf "Senden" klickt, sollte er einige der Felder mit Fehlern kennzeichnen. Wenn sie diese Werte jedoch löschen und erneut auf "Senden" klicken, sollten die Fehler behoben sein. In diesem Fall gibt es aus irgendeinem Grund keine Elemente im Array "currentElements" im Validator, die ausgeführt werden.resetForm() absolut nichts bewirkt.

    Es gibt Fehler in diesem Bereich.

    Bis sie behoben sind, müssen Sie die Antwort von Nick Craver verwenden, NICHT die von Parrots akzeptierte Antwort.

    Meower68
    quelle
    Nur in der JavaScript-Welt ist dies ein akzeptabler Zustand.
    StackOverthrow
    7

    Sie können verwenden:

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

    Ich denke, wir müssen nur die Eingaben eingeben, um alles zu reinigen

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

    Wenn Sie nur eindeutige Validierungsbezeichnungen wünschen, können Sie Code aus jquery.validate.js resetForm () verwenden.

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

    Wenn Sie den folgenden Bootstrap 3-Code verwenden, wird das gesamte Formular bereinigt: Nachrichten, Symbole und Farben ...

    $('.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(); });
    Sebastian Xawery Wiśniowiecki
    quelle
    3

    Ich habe getestet mit:

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

    Es ist in Ordnung, wenn Sie es erneut validieren müssen.

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

    Dadurch werden alle Validierungsfehler zerstört

    kiran
    quelle
    1

    In meinem Fall half bei der Herangehensweise:

    $(".field-validation-error span").hide();
    Taras Strizhyk
    quelle
    Keine der anderen Antworten hat funktioniert, aber Ihre Antwort hat gut funktioniert. Danke
    Arash.Zandi
    1

    Wenn Sie eine Validierung auf der Clientseite ausblenden möchten, die nicht Teil eines Formulars ist, können Sie den folgenden Code verwenden:

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

    Versuchte jede einzelne Antwort. Das einzige, was für mich funktioniert hat, war:

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

    Verwenden von:

    jquery-validate/1.16.0
    
    jquery-validation-unobtrusive/3.2.6/
    Artur Kędzior
    quelle
    1

    Keine der anderen Lösungen hat bei mir funktioniert. resetForm()ist klar dokumentiert, um das eigentliche Formular zurückzusetzen, z. B. die Daten aus dem Formular zu entfernen, was nicht das ist, was ich will. Es passiert einfach manchmal nicht, sondern nur die Fehler zu entfernen. Was schließlich für mich funktioniert hat, ist Folgendes:

    validator.hideThese(validator.errors());
    jlh
    quelle
    0

    Versuchen Sie, dies zum Entfernen der Validierung zu verwenden, indem Sie auf Abbrechen klicken

     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);
                    }
                } 
            }
    sonniger Goyal
    quelle
    Diese Funktion arbeitet an der Abbrechen-Taste und wo Sie diese sonst noch verwenden möchten, ist gut. Versuchen Sie es
    Sunny Goyal
    0

    Versuchen zu benutzen:

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

    auf Schaltfläche Löschen.

    ZhukovRA
    quelle
    0

    Um die Validierungszusammenfassung zu entfernen, können Sie dies schreiben

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

    Nach dem Entfernen wird diese Validierungszusammenfassung jedoch nicht angezeigt, wenn die Validierung fehlgeschlagen ist, da Sie sie entfernt haben. Verwenden Sie stattdessen das Ausblenden und Anzeigen mit dem folgenden Code

    $('div#errorMessage').css('display', 'none');
    
    $('div#errorMessage').css('display', 'block');  
    Shathar Khan
    quelle
    0

    Keine der oben genannten Lösungen hat bei mir funktioniert. Ich war enttäuscht, meine Zeit damit verschwendet zu haben. Es gibt jedoch eine einfache Lösung.

    Die Lösung wurde erreicht, indem das HTML-Markup für den gültigen Status und das HTML-Markup für den Fehlerstatus verglichen wurden.

    Keine Fehler würden erzeugen:

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

    Wenn ein Fehler auftritt, wird dieses Div mit den Fehlern gefüllt und die Klasse wird in Validierungszusammenfassungsfehler geändert:

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

    Die Lösung ist sehr einfach. Löschen Sie den HTML-Code des Div, der die Fehler enthält, und ändern Sie die Klasse wieder in den gültigen Status.

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

    Viel Spaß beim Codieren.

    Peter der Programmiergott
    quelle
    0

    Wenn Sie ebenfalls zurücksetzen möchten, numberOfInvalids()fügen Sie die folgende Zeile in der resetFormFunktion in der jquery.validate.jsDateizeilennummer hinzu: 415.

    this.invalid = {};
    Maximus
    quelle
    0

    Ich habe es gerade getan

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

    um den roten Rand in den Eingabefehlerfeldern zu entfernen.

    michaelhsilva9944
    quelle
    0

    $(FORM_ID).validate().resetForm(); funktioniert immer noch nicht wie erwartet.

    Ich lösche Form mit resetForm() . Es funktioniert in jedem Fall bis auf einen !!

    Wenn ich ein Formular über Ajax lade und nach dem Laden meiner Dynamik eine Formularüberprüfung anwende HTML, versuche ich, das Formular mit zurückzusetzenresetForm() , schlägt es fehl und es löscht auch alle Überprüfungen, die ich auf Formularelemente anwende.

    Verwenden Sie dies daher bitte nicht für von Ajax geladene Formulare ODER für die manuell initialisierte Validierung.

    PS Sie müssen die Antwort von Nick Craver für ein Szenario verwenden, wie ich es erklärt habe.

    Parixit
    quelle
    0

    validator.resetForm()Methode klaren Fehlertext. Aber wenn Sie den roten Rahmen entfernen möchten von Feldern müssen Sie die Klasse entfernenhas-error

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

    Funktion mit den Ansätzen von Travis J , JLewkovich und 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"));
    Eduardo Lucio
    quelle
    0

    Schreiben Sie eigenen Code, da jeder einen anderen Klassennamen verwendet. Ich setze die jQuery-Validierung durch diesen Code zurück.

    $('.error').remove();
            $('.is-invalid').removeClass('is-invalid');
    Sumit Kumar Gupta
    quelle