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


169

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

Odpowiedzi:


209

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.


31
W przypadku osób używających bootstrap są przypadki, w których resetForm()nie usuwa wszystkich wystąpień .errorelementów potomnych formularza. To pozostawi resztki CSS, takie jak czerwony kolor tekstu, chyba że zadzwonisz .removeClass(). Przykład:$('#myform .control-group').removeClass('error');
jlewkovich

14
Używanie bootstrap 3 nie ukrywa błędów walidacji pola. Jaka szkoda.
The Muffin Man

2
U mnie działa z Bootstrap 3. Może problem tkwi w twojej integracji obu bibliotek?
bernie

3
Nie, ten resetForm dosłownie również zatrzyma dane formularza.
Codemole

to, co @JLewkovich mówi, że używanie bootstrap3 jest prawdą, musi zaimplementować ręczne resetowanie, wskakując do inspektora i zastanawiając się, jakie klasy stosują do błędów
Nestor Colt

126

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:

  • Usuń błędy, wskazując powodzenie weryfikacji
  • Obsługa połączeń do wyświetlania błędów
  • Usuń wszystkie informacje o sukcesach lub błędach
  • Zresetuj całą weryfikację formularza

    Oto jak to wygląda w kodzie:

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

    zminifikowane jako rozszerzenie 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();

  • 2
    to świetnie, to rozwiązanie działa również z „ValidationMessageFor”
    Syed Ali

    1
    Wspaniały! Doskonale współpracuje z Bootstrap i MVC!
    swissben

    2
    Przede wszystkim dzięki! Działało to świetnie przez lata, ale teraz odkryłem problem z wydajnością: showErrorswykonuje pewne operacje na DOM i jest wywoływany dla każdego elementu w formularzu. Przeglądarka zawieszała się na kilka sekund podczas używania tego kodu w formularzu z ~ 30 kontrolkami. Rozwiązaniem dla mnie było showErrorswyjście z pętli i wywołanie tego raz tuż przed validator.resetForm. O ile wiem, zachowuje się dokładnie tak samo i jest dużo szybszy.
    Michael Sandino

    Używałem tego do dzisiaj i stwierdziłem, że jeśli użyję tej metody na przycisku "Reset", to usuwa wszystkie błędy, ale nie ma już walidacji ... nawet jeśli spróbuję zweryfikować ponownie, wszystko jest prawidłowe
    Savandy,

    58

    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.


    2
    @mark - poprawne, ale nie jest przeznaczone do ... nadal są nieprawidłowe, po prostu ukrywamy komunikaty o błędach w tym przypadku. Jest to alternatywa dla zaakceptowanej odpowiedzi w przypadkach, w których konkretnie chcesz ukryć (nie ignorować, np. Zabronić przesyłania) błędów. Pojawia się częściej niż myślisz :)
    Nick Craver

    1
    Problem polega na tym, że resetujesz formularz i ponownie go edytujesz. Moje okno dialogowe błędu wyświetla liczbę błędów, a liczba po prostu sumuje się. Nawet „resetForm” nie pomaga.
    znak

    1
    Nawet ja to zrobiłem, ale prowadzi to do innego problemu. Weryfikacje nie mają zastosowania przy następnym otwarciu okna dialogowego!
    Vandesh

    Ta technika zadziałała dla mnie na stronie Bootstrap 3. Wystarczyło zmienić klasę błędu na następującą: $(".has-error").removeClass("has-error");
    Myke Black

    42

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


    24

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

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

    18

    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.


    Tylko w świecie JavaScript jest to akceptowalny stan rzeczy.
    StackOverthrow


    6

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

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

    5

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

    4

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

    3

    Testowałem z:

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

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


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

    Spowoduje to zniszczenie wszystkich błędów walidacji


    1

    W moim przypadku pomogło w podejściu:

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

    Żadna z innych odpowiedzi nie zadziałała, ale Twoja odpowiedź zadziałała dobrze. Dzięki
    Arash.Zandi

    1

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

    1

    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/

    1

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

    0

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

    Ta funkcja działa na przycisku anulowania, a gdzie jeszcze chcesz tego użyć, jest dobre. Spróbuj
    słoneczny goyal

    0

    Spróbuj użyć:

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

    na przycisku Wyczyść.


    0

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

    0

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


    0

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

    this.invalid = {};

    0

    właśnie zrobiłem

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

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


    0

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


    0

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

    0

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

    0

    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');
    Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
    Licensed under cc by-sa 3.0 with attribution required.