Jak wyczyścić komunikaty o błędach walidacji jQuery?

Używam wtyczki walidacji jQuery do walidacji po stronie klienta. Funkcja editUser()jest wywoływana po kliknięciu przycisku „Edytuj użytkownika”, który wyświetla komunikaty o błędach.

Ale chcę wyczyścić komunikaty o błędach w moim formularzu, kiedy klikam przycisk „Wyczyść”, który wywołuje oddzielną funkcję 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
    }
}

Chcesz resetForm()metody:

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

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

Wziąłem to ze źródła jednego z ich dem .

Uwaga: ten kod nie będzie działał dla Bootstrap 3.

Sam natknąłem się na ten problem. Miałem potrzebę warunkowego walidacji części formularza, gdy formularz był konstruowany na podstawie kroków (tj. Niektóre dane wejściowe były dynamicznie dołączane podczas działania). W rezultacie czasami lista rozwijana wyboru wymagałaby weryfikacji, a czasami nie. Jednak pod koniec próby musiał zostać zweryfikowany. W rezultacie potrzebowałem solidnej metody, która nie stanowiła obejścia. Sprawdziłem kod źródłowy jquery.validate.

Oto co wymyśliłem:

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

Jeśli chcesz po prostu ukryć błędy:

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

Jeśli podałeś errorClass, wywołaj tę klasę, aby zamiast tego ukryć error(domyślnie), której użyłem powyżej.

Jeśli wcześniej nie zapisałeś walidatorów oddzielnie podczas dołączania ich do formularza, możesz po prostu wywołać

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

as .validate()zwróci te same walidatory, które dołączyłeś wcześniej (jeśli to zrobiłeś).

Jeśli chcesz to zrobić bez użycia oddzielnej zmiennej, to

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

Niestety validator.resetForm()w wielu przypadkach NIE działa.

Mam przypadek, gdy ktoś kliknie przycisk „Prześlij” w formularzu z pustymi wartościami, powinien zignorować opcję „Prześlij”. Bez błędów. To dość łatwe. Jeśli ktoś wstawi częściowy zestaw wartości i kliknie „Prześlij”, powinien oflagować niektóre pola z błędami. Jeśli jednak wyczyszczą te wartości i ponownie klikną „Prześlij”, powinno to usunąć błędy. W tym przypadku, z jakiegoś powodu, w tablicy „currentElements” w walidatorze nie ma żadnych elementów, więc wykonanie .resetForm()absolutnie nic nie robi.

Są tam opublikowane błędy.

Do czasu ich naprawienia musisz użyć odpowiedzi Nicka Cravera, NIE zaakceptowanej odpowiedzi Papugi.

Możesz użyć:

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

Myślę, że wystarczy wprowadzić dane wejściowe, aby wszystko wyczyścić

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

Jeśli chcesz tylko wyczyścić etykiety walidacyjne, możesz użyć kodu z jquery.validate.js resetForm ()

var validator = $('#Form').validate();

validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);

Dla tych, którzy używają kodu Bootstrap 3, poniższy wyczyści cały formularz: wiadomości, ikony i kolory ...

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

Testowałem z:

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

Będzie dobrze, gdy będziesz musiał ponownie go zweryfikować.

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

Spowoduje to zniszczenie wszystkich błędów walidacji

W moim przypadku pomogło w podejściu:

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

Jeśli chcesz ukryć walidację po stronie klienta, która nie jest częścią przesłanego formularza, możesz użyć następującego kodu:

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

Próbowałem każdej odpowiedzi. Jedyne, co mi pomogło, to:

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

Za pomocą:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Żadne z innych rozwiązań nie działało dla mnie. resetForm()jest jasno udokumentowany, aby zresetować faktyczny formularz, np. usunąć dane z formularza, co nie jest tym, czego chcę. Zdarza się, że czasami tego nie robi, a po prostu usuwa błędy. To, co w końcu zadziałało, to:

validator.hideThese(validator.errors());

Spróbuj użyć tego do usunięcia weryfikacji po kliknięciu anulowania

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

Spróbuj użyć:

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

na przycisku Wyczyść.

Aby usunąć podsumowanie walidacji, możesz to napisać

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

Jednak po usunięciu ponownie, jeśli weryfikacja się nie powiodła, podsumowanie weryfikacji nie zostanie wyświetlone, ponieważ zostało usunięte. Zamiast tego użyj funkcji ukrywania i wyświetlania, używając poniższego kodu

$('div#errorMessage').css('display', 'none');

$('div#errorMessage').css('display', 'block');  

Żadne z powyższych rozwiązań nie zadziałało. Byłem rozczarowany, tracąc na nich czas. Jest jednak proste rozwiązanie.

Rozwiązanie to zostało osiągnięte poprzez porównanie znacznika HTML dla prawidłowego stanu i znacznika HTML dla stanu błędu.

Żadne błędy nie spowodowałyby:

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

gdy wystąpi błąd, ten element div jest zapełniany błędami, a klasa jest zmieniana na validation-summary-errors:

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

Rozwiązanie jest bardzo proste. Wyczyść kod HTML elementu div, który zawiera błędy, a następnie przywróć klasę do prawidłowego stanu.

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

Miłego kodowania.

Jeśli chcesz również zresetować, numberOfInvalids()dodaj następujący wiersz resetFormfunkcji w jquery.validate.jslinii pliku o numerze: 415.

this.invalid = {};

właśnie zrobiłem

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

aby usunąć czerwoną ramkę z pól błędów wejściowych.

$(FORM_ID).validate().resetForm(); nadal nie działa zgodnie z oczekiwaniami.

Czyszczę formularz z resetForm(). Działa we wszystkich przypadkach oprócz jednego !!

Kiedy ładuję dowolny formularz przez Ajax i stosuję walidację formularza po załadowaniu mojej dynamiki HTML, po tym, jak próbuję zresetować formularz za pomocą resetForm()i kończy się to niepowodzeniem, a także opróżnia się wszystkie walidacje, które stosuję na elementach formularza.

Więc uprzejmie nie używaj tego dla formularzy ładowanych przez Ajax LUB ręcznie zainicjowanej walidacji.

PS Musisz użyć odpowiedzi Nicka Cravera dla takiego scenariusza, jak wyjaśniłem.

validator.resetForm()Wyczyść tekst błędu. Ale jeśli chcesz usunąć CZERWONĄ ramkę z pól, musisz usunąć klasęhas-error

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

Funkcja wykorzystująca podejście Travisa J , JLewkovicha i Nicka Cravera ...

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

Napisz własny kod, ponieważ każdy używa innej nazwy klasy. Resetuję walidację jQuery za pomocą tego kodu.

$('.error').remove();
        $('.is-invalid').removeClass('is-invalid');