Bagaimana cara menghapus pesan kesalahan validasi jQuery?


169

Saya menggunakan plugin validasi jQuery untuk validasi sisi klien. Fungsinya editUser()disebut pada klik tombol 'Edit Pengguna', yang menampilkan pesan kesalahan.

Tapi saya ingin menghapus pesan kesalahan pada formulir saya, ketika saya mengklik tombol 'Hapus', yang memanggil fungsi yang terpisah 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
    }
}

Jawaban:


209

Anda menginginkan resetForm()metodenya:

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

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

Saya mengambilnya dari sumber salah satu demo mereka .

Catatan: Kode ini tidak akan berfungsi untuk Bootstrap 3.


31
Bagi mereka yang menggunakan bootstrap, ada beberapa kasus di mana resetForm()tidak menghapus semua instance .errorpada elemen turunan dari form. Ini akan meninggalkan sisa CSS seperti warna teks merah kecuali Anda menelepon .removeClass(). Contoh:$('#myform .control-group').removeClass('error');
jlewkovich

14
Menggunakan bootstrap 3 ini tidak menyembunyikan kesalahan validasi bidang. Sayang sekali.
The Muffin Man

2
Ini bekerja untuk saya dengan Bootstrap 3. Mungkin masalahnya adalah dengan integrasi kedua perpustakaan Anda?
bernie

3
Tidak ada resetForm ini yang bahkan akan mengembalikan data formulir juga.
Codemole

apa yang dikatakan @JLewkovich menggunakan bootstrap3 adalah benar, harus menerapkan reset manual melompat ke inspektur dan mencari tahu apa kelas menerapkan kesalahan
Nestor Colt

126

Saya menemukan masalah ini sendiri. Saya memiliki kebutuhan untuk memvalidasi bagian-bagian dari suatu bentuk sementara syarat sedang dibangun berdasarkan langkah-langkah (yaitu input tertentu secara dinamis ditambahkan selama runtime). Akibatnya, kadang-kadang dropdown pilih akan membutuhkan validasi, dan kadang-kadang tidak. Namun, pada akhir cobaan, itu perlu divalidasi. Akibatnya, saya membutuhkan metode yang kuat yang bukan solusi. Saya berkonsultasi dengan kode sumber untuk jquery.validate.

Inilah yang saya pikirkan:

  • Hapus kesalahan dengan menunjukkan keberhasilan validasi
  • Panggil penangan untuk tampilan kesalahan
  • Bersihkan semua penyimpanan dari kesuksesan atau kesalahan
  • Setel ulang seluruh validasi formulir

    Berikut ini tampilannya dalam kode:

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

    diperkecil sebagai ekstensi 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
    itu hebat, solusi ini juga bekerja dengan "ValidationMessageFor"
    Syed Ali

    1
    Bagus! Berfungsi sempurna dengan Bootstrap dan MVC!
    swissben

    2
    Pertama-tama, terima kasih! Apakah ini bekerja dengan baik selama bertahun-tahun, tetapi sekarang saya telah menemukan masalah kinerja: showErrorsmelakukan manipulasi DOM dan itu dipanggil untuk setiap elemen dalam formulir. Browser membeku selama beberapa detik saat menggunakan kode ini pada formulir dengan ~ 30 kontrol. Solusi bagi saya adalah dengan showErrorskeluar dari loop dan cukup menyebutnya sekali sebelum sebelumnya validator.resetForm. Sejauh yang saya tahu, itu berperilaku dengan cara yang persis sama dan jauh lebih cepat.
    Michael Sandino

    Saya telah menggunakan ini sampai hari ini bahwa saya menemukan bahwa jika saya menggunakan metode ini pada tombol "Reset", itu menghapus semua kesalahan tetapi tidak ada validasi lagi ... bahkan jika saya mencoba untuk memvalidasi lagi, semuanya valid
    Savandy

    58

    Jika Anda ingin menyembunyikan kesalahan:

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

    Jika Anda menentukan errorClass, panggil kelas itu untuk bersembunyi error(default) yang saya gunakan di atas.


    2
    @mark - benar, tetapi tidak dirancang untuk ... mereka masih tidak valid, kami hanya menyembunyikan pesan kesalahan dalam kasus ini. Ini adalah alternatif dari jawaban yang diterima untuk kasus-kasus di mana Anda secara khusus ingin menyembunyikan (tidak mengabaikan, misalnya melarang pengiriman) kesalahan. Muncul lebih sering yang Anda pikirkan :)
    Nick Craver

    1
    Masalahnya adalah ketika Anda mengatur ulang formulir kembali dan mengeditnya kembali. Dialog kesalahan saya menampilkan jumlah kesalahan dan jumlah terus bertambah. Bahkan 'resetForm' tidak membantu.
    tandai

    1
    Bahkan saya melakukan ini, tetapi itu mengarah ke masalah lain. Validasi tidak berlaku saat dialog berikutnya dibuka!
    Vandesh

    Teknik ini berhasil bagi saya di situs web Bootstrap 3. Hanya harus mengubah kelas kesalahan sebagai berikut: $(".has-error").removeClass("has-error");
    Myke Black

    42

    Jika sebelumnya Anda tidak menyimpan validator secara terpisah saat melampirkannya ke formulir, Anda juga bisa langsung memohon

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

    karena .validate()akan mengembalikan validator yang sama dengan yang Anda lampirkan sebelumnya (jika Anda melakukannya).


    25

    Jika Anda ingin melakukannya tanpa menggunakan variabel yang terpisah, maka

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

    18

    Sayangnya, validator.resetForm()TIDAK berfungsi, dalam banyak kasus.

    Saya memiliki kasus di mana, jika seseorang mengklik "Kirim" pada formulir dengan nilai kosong, itu harus mengabaikan "Kirim." Tidak ada kesalahan Itu cukup mudah. Jika seseorang memasukkan sebagian nilai, dan klik "Kirim," itu akan menandai beberapa bidang dengan kesalahan. Namun, jika mereka menghapus nilai-nilai itu dan menekan "Kirim" lagi, itu akan menghapus kesalahan. Dalam hal ini, untuk beberapa alasan, tidak ada elemen dalam array "currentElements" di dalam validator, jadi mengeksekusi .resetForm()sama sekali tidak melakukan apa pun.

    Ada bug yang diposting di ini.

    Sampai saat mereka memperbaikinya, Anda harus menggunakan jawaban Nick Craver, BUKAN jawaban yang diterima Parrot.


    Hanya di dunia JavaScript apakah ini keadaan yang dapat diterima.
    StackOverthrow


    6

    Saya pikir kita hanya perlu memasukkan input untuk membersihkan semuanya

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

    5

    Jika Anda hanya ingin menghapus label validasi, Anda dapat menggunakan kode dari jquery.validate.js resetForm ()

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

    4

    Bagi mereka yang menggunakan kode Bootstrap 3 di bawah ini akan membersihkan seluruh formulir: pesan, ikon dan warna ...

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

    Saya diuji dengan:

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

    Ini akan baik-baik saja, ketika Anda perlu memvalidasi lagi.


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

    Ini akan menghancurkan semua kesalahan validasi


    1

    Dalam kasus saya membantu dengan pendekatan:

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

    Tidak ada jawaban lain yang bekerja, tetapi jawaban Anda bekerja dengan baik, Terima kasih
    Arash.Zandi

    1

    Jika Anda ingin menyembunyikan validasi di sisi klien yang bukan bagian dari formulir kirim, Anda dapat menggunakan kode berikut:

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

    1

    Mencoba setiap jawaban. Satu-satunya hal yang berhasil bagi saya adalah:

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

    Menggunakan:

    jquery-validate/1.16.0
    
    jquery-validation-unobtrusive/3.2.6/

    1

    Tidak ada solusi lain yang bekerja untuk saya. resetForm()secara jelas didokumentasikan untuk mengatur ulang formulir yang sebenarnya, misalnya menghapus data dari formulir, yang bukan yang saya inginkan. Kebetulan kadang-kadang tidak melakukan itu, tetapi hanya menghapus kesalahan. Apa yang akhirnya berhasil bagi saya adalah ini:

    validator.hideThese(validator.errors());

    0

    Coba gunakan ini untuk menghapus validasi pada klik pada batal

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

    Fungsi ini berfungsi pada tombol batal dan di mana lagi Anda ingin menggunakan yang ini bagus. Coba
    sunny goyal

    0

    Coba gunakan:

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

    pada tombol Clear.


    0

    Untuk menghapus ringkasan validasi, Anda dapat menulis ini

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

    Namun, begitu Anda menghapus, sekali lagi jika validasi gagal, tidak akan menampilkan ringkasan validasi ini karena Anda menghapusnya. Alih-alih gunakan sembunyikan dan tampilkan menggunakan kode di bawah ini

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

    0

    Tidak ada solusi di atas yang berfungsi untuk saya. Saya kecewa membuang-buang waktu saya pada mereka. Namun ada solusi yang mudah.

    Solusi dicapai dengan membandingkan tanda HTML untuk negara yang valid dan HTML untuk negara yang salah.

    Tidak ada kesalahan akan menghasilkan:

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

    ketika kesalahan terjadi div ini diisi dengan kesalahan dan kelas diubah ke validasi-ringkasan-kesalahan:

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

    Solusinya sangat sederhana. Kosongkan HTML dari div yang berisi kesalahan dan kemudian ubah kelas kembali ke status yang valid.

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

    Selamat coding.


    0

    Jika Anda ingin mengatur ulang numberOfInvalids()juga maka tambahkan resetFormfungsi baris berikut dalam jquery.validate.jsnomor baris file: 415.

    this.invalid = {};

    0

    saya baru saja melakukannya

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

    untuk menghapus batas merah pada bidang kesalahan input.


    0

    $(FORM_ID).validate().resetForm(); masih tidak berfungsi seperti yang diharapkan.

    Saya mengisi formulir dengan resetForm(). Ini berfungsi dalam semua kasus kecuali satu !!

    Ketika saya memuat formulir apa pun melalui Ajax dan menerapkan validasi formulir setelah memuat dinamis saya HTML, kemudian setelah ketika saya mencoba untuk mengatur ulang formulir dengan resetForm()dan gagal, dan itu juga menghapus semua validasi yang saya terapkan pada elemen formulir.

    Jadi mohon jangan gunakan ini untuk formulir yang dimuat Ajax ATAU validasi yang diinisialisasi secara manual.

    PS Anda harus menggunakan jawaban Nick Craver untuk skenario seperti yang saya jelaskan.


    0

    validator.resetForm()metode menghapus teks kesalahan. Tetapi jika Anda ingin menghapus batas RED dari bidang Anda harus menghapus kelashas-error

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

    0

    Berfungsi menggunakan pendekatan Travis J , JLewkovich dan 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"));

    0

    Tulis kode sendiri karena semua orang menggunakan nama kelas yang berbeda. Saya mengatur ulang validasi jQuery dengan kode ini.

    $('.error').remove();
            $('.is-invalid').removeClass('is-invalid');
    Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
    Licensed under cc by-sa 3.0 with attribution required.