Bagaimana cara menghapus pesan kesalahan validasi jQuery?

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

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.

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:

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

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.

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

Jika Anda ingin melakukannya tanpa menggunakan variabel yang terpisah, maka

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

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.

Kamu bisa memakai:

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

Saya pikir kita hanya perlu memasukkan input untuk membersihkan semuanya

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

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

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

Saya diuji dengan:

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

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

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

Ini akan menghancurkan semua kesalahan validasi

Dalam kasus saya membantu dengan pendekatan:

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

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

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/

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

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

Coba gunakan:

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

pada tombol Clear.

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

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.

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

this.invalid = {};

saya baru saja melakukannya

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

untuk menghapus batas merah pada bidang kesalahan input.

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

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

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

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