JQuery doğrulama hata mesajları nasıl temizlenir?

İstemci tarafı doğrulaması için jQuery doğrulama eklentisini kullanıyorum. editUser()Hata mesajlarını gösteren 'Kullanıcı Düzenle' düğmesine tıklandığında işlev çağrılır.

Ancak formumdaki 'Temizle' düğmesine tıkladığımda, ayrı bir işlev çağıran hata mesajlarını silmek istiyorum 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
    }
}

resetForm()Yöntemi istiyorsunuz :

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

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

Demolarından birinin kaynağından aldım .

Not: Bu kod Bootstrap 3 için çalışmaz.

Bu sorunla kendim karşılaştım. Form adımlara dayalı olarak inşa edilirken bir formun bölümlerini koşullu olarak doğrulamak için ihtiyaç vardı (yani belirli girdiler çalışma sırasında dinamik olarak eklenmiştir). Sonuç olarak, bazen bir seçmeli açılır listenin doğrulanması gerekir, bazen de gerekmez. Bununla birlikte, çile sonunda, doğrulanması gerekiyordu. Sonuç olarak, geçici bir çözüm olmayan sağlam bir yönteme ihtiyacım vardı. İçin kaynak koduna başvurdumjquery.validate .

İşte ben geldim:

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

Hataları gizlemek istiyorsanız:

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

Seçeneğini belirlediyseniz errorClass, erroryukarıda kullandığım (varsayılan) yerine gizlemek için o sınıfı arayın .

Doğrulayıcıları forma eklerken daha önce ayırmadıysanız, sadece

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

olarak .validate(), daha önce eklediğiniz aynı doğrulayıcıları döndürür (bunu yaptıysanız).

Ayrı bir değişken kullanmadan yapmak istiyorsanız

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

Ne yazık ki, validator.resetForm() çoğu durumda işe yaramaz.

Birisi boş değerleri olan bir form üzerinde "Gönder" vurursa, "Gönder" yoksaymalısınız bir durum var. Hata yok. Bu yeterince kolay. Birisi kısmi bir değer kümesi koyar ve "Gönder" i tıklarsa, bazı alanların hatalı olarak işaretlenmesi gerekir. Ancak, bu değerleri silip tekrar "Gönder" e basarsa, hataları temizlemelidir. Bu durumda, herhangi bir nedenle, doğrulayıcı içinde "currentElements" dizisinde hiçbir öğe bulunmadığından,.resetForm() kesinlikle hiçbir şey yapmaz.

Bu konuda yayınlanan hatalar var.

Onları düzelttikleri zamana kadar, Papağanların kabul ettiği cevabı değil, Nick Craver'ın cevabını kullanmanız gerekir.

Kullanabilirsiniz:

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

Sanırım her şeyi temizlemek için girişlere girmemiz gerekiyor

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

Doğrulama etiketlerini temizlemek istiyorsanız jquery.validate.js adresinden kodu kullanabilirsiniz resetForm ()

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

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

Aşağıdaki Bootstrap 3 kodunu kullananlar için tüm form temizlenir: mesajlar, simgeler ve renkler ...

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

Şununla test ettim:

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

Tekrar doğrulamanız gerektiğinde sorun olmayacaktır.

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

Bu, tüm doğrulama hatalarını yok eder

Benim durumumda yaklaşım ile yardımcı oldu:

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

İstemci tarafında form gönderme işleminin parçası olmayan bir doğrulamayı gizlemek istiyorsanız aşağıdaki kodu kullanabilirsiniz:

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

Her cevabı denedim. Benim için işe yarayan tek şey:

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

Kullanımı:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Diğer çözümlerin hiçbiri benim için çalışmadı. resetForm()gerçek formu sıfırlamak için açık bir şekilde belgelendirilmiştir, örneğin verileri formdan kaldırmak, istediğim gibi değil. Sadece bazen bunu yapmaz, ancak hataları kaldırın. Sonunda benim için işe yarayan şuydu:

validator.hideThese(validator.errors());

İptal üzerine tıklandığında doğrulamayı kaldırmak için bunu kullanmayı deneyin

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

Kullanmaya çalışmak:

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

Temizle düğmesine basın.

Doğrulama özetini kaldırmak için bunu yazabilirsiniz

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

Ancak, kaldırdığınızda, yine doğrulama başarısız olursa, kaldırdığınız için bu doğrulama özetini göstermez. Bunun yerine aşağıdaki kodu kullanarak gizle ve görüntüle kullanın

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

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

Yukarıdaki çözümlerin hiçbiri benim için işe yaramadı. Onlara vaktimi boşa harcadığım için hayal kırıklığına uğradım. Ancak kolay bir çözüm var.

Çözüm, geçerli durum için HTML işaretlemesi ve hata durumu için HTML işaretlemesi karşılaştırılarak elde edildi.

Hiçbir hata oluşmaz:

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

bir hata oluştuğunda bu div hatalarla doldurulur ve sınıf doğrulama-özet hatalarına değiştirilir:

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

Çözüm çok basit. Hataları içeren div'ın HTML'sini temizleyin ve sınıfı tekrar geçerli duruma değiştirin.

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

Mutlu kodlama.

Ayrıca sıfırlamak istiyorsanız , dosya satırı numarasına fonksiyonda numberOfInvalids()şu satırı ekleyin : 415.resetFormjquery.validate.js

this.invalid = {};

daha yeni yaptım

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

giriş hatası alanlarındaki kırmızı kenarlığı kaldırmak için.

$(FORM_ID).validate().resetForm(); hala beklendiği gibi çalışmıyor.

Formu temizliyorum resetForm() . Biri hariç her durumda çalışır !!

Ajax aracılığıyla herhangi bir formu yüklediğimde ve dinamiğimi yükledikten sonra form doğrulamasını uyguladığımda HTML, ardından formu ile sıfırlamaya çalıştığımdaresetForm() ve başarısız olduğunda ve ayrıca form öğelerine uyguladığım tüm doğrulamayı temizledikten sonra.

Bu yüzden lütfen Ajax yüklü formlar VEYA elle başlatılan doğrulama için kullanmayın.

PS Açıkladığım gibi senaryo için Nick Craver'ın cevabını kullanmanız gerekiyor .

validator.resetForm()yöntem hata metnini temizle. Ancak alanlardan KIRMIZI kenarlığı kaldırmak istiyorsanız sınıfı kaldırmanız gerekirhas-error

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

Travis J , JLewkovich ve Nick Craver yaklaşımlarını kullanarak işlev ...

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

Kendi kodunu yaz çünkü herkes farklı bir sınıf adı kullanıyor. Bu kodla jQuery doğrulamasını sıfırlıyorum.

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