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
    }
}
Vicky
źródło

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.

Papugi
źródło
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();
  • Travis J.
    źródło
    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.

    Nick Craver
    źródło
    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ś).

    Juri
    źródło
    24

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

    $("#myForm").data('validator').resetForm();
    Abhijit Mazumder
    źródło
    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.

    Meower68
    źródło
    Tylko w świecie JavaScript jest to akceptowalny stan rzeczy.
    StackOverthrow
    7

    Możesz użyć:

    $("#myform").data('validator').resetForm();
    Brain Balaka
    źródło
    6

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

    $("#your_div").click(function() {
      $(".error").html('');
      $(".error").removeClass("error");
    });
    Karra Max
    źródło
    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);
    Chintsu
    źródło
    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(); });
    Sebastian Xawery Wiśniowiecki
    źródło
    3

    Testowałem z:

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

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

    Trung
    źródło
    1
    var validator = $("#myForm").validate();
    validator.destroy();

    Spowoduje to zniszczenie wszystkich błędów walidacji

    kiran
    źródło
    1

    W moim przypadku pomogło w podejściu:

    $(".field-validation-error span").hide();
    Taras Strizhyk
    źródło
    Ż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");
    mbadeveloper
    źródło
    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/
    Artur Kędzior
    źródło
    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());
    jlh
    źródło
    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);
                    }
                } 
            }
    słoneczny goyal
    źródło
    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ść.

    ZhukovRA
    źródło
    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');  
    Shathar Khan
    źródło
    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.

    Piotr, bóg programowania
    źródło
    0

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

    this.invalid = {};
    Maximus
    źródło
    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.

    michaelhsilva9944
    źródło
    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.

    Parixit
    źródło
    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');
    sójka
    źródło
    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"));
    Eduardo Lucio
    źródło
    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');
    Sumit Kumar Gupta
    źródło