Wie lösche ich Fehlermeldungen zur jQuery-Validierung?

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

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.

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:

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

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.

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

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

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

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.

Sie können verwenden:

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

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

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

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

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

Ich habe getestet mit:

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

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

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

Dadurch werden alle Validierungsfehler zerstört

In meinem Fall half bei der Herangehensweise:

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

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

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/

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

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

Versuchen zu benutzen:

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

auf Schaltfläche Löschen.

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

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.

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

Ich habe es gerade getan

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

um den roten Rand in den Eingabefehlerfeldern zu entfernen.

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

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

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

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