JQuery सत्यापन त्रुटि संदेशों को कैसे साफ़ करें?

Question

मैं क्लाइंट साइड सत्यापन के लिए jQuery सत्यापन प्लगइन का उपयोग कर रहा हूं। फ़ंक्शन editUser()को 'उपयोगकर्ता को संपादित करें' बटन पर क्लिक करने पर बुलाया जाता है, जो त्रुटि संदेशों को प्रदर्शित करता है।

लेकिन मैं अपने फ़ॉर्म पर त्रुटि संदेश साफ़ करना चाहता हूं, जब मैं 'साफ़' बटन पर क्लिक करता हूं, जो एक अलग फ़ंक्शन को कॉल करता है 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
    }
}

Answer 1

आप resetForm()विधि चाहते हैं :

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

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

मैंने इसे उनके एक डेमो के स्रोत से पकड़ा ।

नोट: यह कोड बूटस्ट्रैप 3 के लिए काम नहीं करेगा।

Comments

बूटस्ट्रैप का उपयोग करने वालों के लिए, ऐसे मामले हैं जो फॉर्म के बाल तत्वों पर resetForm()सभी उदाहरणों को स्पष्ट नहीं .errorकरते हैं। जब तक आप कॉल नहीं करेंगे, यह लाल पाठ रंग की तरह अवशिष्ट सीएसएस को छोड़ देगा .removeClass()। उदाहरण:$('#myform .control-group').removeClass('error');

— jlewkovich

बूटस्ट्रैप 3 के उपयोग से यह क्षेत्र सत्यापन त्रुटियों को छिपा नहीं पाता है। कितनी शर्म की बात है।

— मफिन मैन

यह मेरे लिए बूटस्ट्रैप 3 के साथ काम करता है। शायद समस्या दोनों पुस्तकालयों के एकीकरण के साथ है?

— बर्नरी

कोई भी यह रीसेटफ़ॉर्म वस्तुतः फॉर्म डेटा को भी आराम नहीं करेगा।

— कोडमोल

@JLewkovich का कहना है कि bootstrap3 का उपयोग करना सही है, को इंस्पेक्टर में एक मैनुअल रीसेटिंग जंपिंग को लागू करना चाहिए और यह पता लगाना चाहिए कि कौन सी कक्षाएं त्रुटियों पर लागू हो रही हैं

— Nestor Colt

Answer 2

मैं खुद इस मुद्दे पर आया था। मुझे फॉर्म के सशर्त रूप से मान्य भागों की आवश्यकता थी, जबकि चरणों के आधार पर फॉर्म का निर्माण किया जा रहा था (यानी कुछ इनपुट रनटाइम के दौरान गतिशील रूप से संलग्न थे)। परिणामस्वरूप, कभी-कभी चुनिंदा ड्रॉपडाउन को सत्यापन की आवश्यकता होती है, और कभी-कभी ऐसा नहीं होता। हालाँकि, परीक्षा के अंत तक, इसे मान्य करने की आवश्यकता थी। नतीजतन, मुझे एक मजबूत विधि की आवश्यकता थी जो वर्कअराउंड नहीं थी। मैंने स्रोत कोड के लिए परामर्श किया jquery.validate।

यहां वह है जो मैंने जुटाया:

सत्यापन सफलता का संकेत देकर स्पष्ट त्रुटियां

त्रुटि प्रदर्शन के लिए कॉल हैंडलर

सफलता या त्रुटियों के सभी भंडारण को साफ़ करें

संपूर्ण प्रपत्र सत्यापन रीसेट करें

यह वही है जो कोड में दिखता है:

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

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

Comments

बहुत बढ़िया, यह समाधान "ValidationMessageFor" के साथ भी काम कर रहा है

— सैयद अली

महान! पूरी तरह से बूटस्ट्रैप और MVC के साथ काम करता है!

— स्विस

सबसे पहले, धन्यवाद! वर्षों से यह काम कर रहा था, लेकिन अब मैंने एक प्रदर्शन समस्या की खोज की है: showErrorsकुछ डोम हेरफेर करता है और इसे फॉर्म में प्रत्येक तत्व के लिए कहा जाता है। इस कोड को ~ 30 नियंत्रणों के साथ फ़ॉर्म में उपयोग करते समय ब्राउज़र कुछ सेकंड के लिए जम जाता है। मेरे लिए समाधान यह था showErrorsकि मैं लूप से बाहर निकल जाऊं और बस एक बार पहले ही फोन कर दूं validator.resetForm। जहां तक ​​मैं बता सकता हूं, यह बिल्कुल उसी तरह से व्यवहार करता है और बहुत तेज है।

— माइकल सैंडिनो

मैं आज तक यह प्रयोग कर रहा हूं कि मैंने पाया कि अगर मैं "रीसेट" बटन पर इस विधि का उपयोग करता हूं, तो यह सभी त्रुटियों को दूर करता है, लेकिन अब कोई सत्यापन नहीं है ... भले ही मैं फिर से सत्यापन करने की कोशिश करूं, सब कुछ मान्य है

— सवैंडी

Answer 3

यदि आप केवल त्रुटियों को छिपाना चाहते हैं:

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

यदि आपने निर्दिष्ट किया है errorClass, तो उस वर्ग को इसके बजाय छिपाने के लिए कॉल करें error(डिफ़ॉल्ट) जिसका मैंने ऊपर उपयोग किया है।

Comments

@ चिह्न - सही है, लेकिन इसे डिज़ाइन नहीं किया गया ... वे अभी भी अमान्य हैं, हम इस मामले में केवल त्रुटि संदेश छिपा रहे हैं। यह उन मामलों के लिए स्वीकृत उत्तर का विकल्प है जहां आप विशेष रूप से छिपाना चाहते हैं (अनदेखी न करें, उदाहरण प्रस्तुत करना अस्वीकार करें)। यह अधिक बार आता है आप :) लगता है कि कि

— निक Craver

समस्या तब होती है जब आप फ़ॉर्म को वापस रीसेट करते हैं और उसे फिर से संपादित करते हैं। मेरा त्रुटि संवाद त्रुटियों की गिनती को प्रदर्शित करता है और गणना केवल योग करने के लिए रखता है। यहां तक ​​कि 'रीसेटफ़ॉर्म' भी मदद नहीं करता है।

— अंक

यहां तक ​​कि मैंने ऐसा किया, लेकिन यह एक और मुद्दे की ओर ले जाता है। अगली बार संवाद खुलने पर सत्यापन लागू नहीं होता है!

— वंदेश

इस तकनीक ने मेरे लिए बूटस्ट्रैप 3 वेबसाइट पर काम किया। बस त्रुटि वर्ग को निम्न में बदलना था: $(".has-error").removeClass("has-error");

— Myke Black

Answer 4

यदि आपने पूर्व में सत्यापनकर्ताओं को अलग नहीं किया है, तो उन्हें फॉर्म में संलग्न करते समय आप केवल बस चालान कर सकते हैं

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

जैसा .validate()कि आपने पहले जोड़ा था वैसा ही वैधीकरण लौटाएगा (यदि आपने ऐसा किया है)।

Answer 5

यदि आप एक अलग चर का उपयोग किए बिना करना चाहते हैं तो

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

Answer 6

दुर्भाग्य से, validator.resetForm()कई मामलों में काम नहीं करता है।

मेरे पास एक ऐसा मामला है, जहां अगर कोई "सबमिट" को रिक्त मानों के साथ प्रपत्र पर हिट करता है, तो उसे "सबमिट करें" को अनदेखा करना चाहिए। त्रुटियाँ नहीं। यह काफी आसान है। अगर कोई मानों के एक आंशिक सेट में रखता है, और "सबमिट करें" हिट करता है, तो इसे कुछ फ़ील्ड्स को त्रुटियों के साथ चिह्नित करना चाहिए। यदि, हालांकि, वे उन मूल्यों को मिटा देते हैं और फिर से "सबमिट" करते हैं, तो यह त्रुटियों को साफ करना चाहिए। इस मामले में, किसी कारण से, सत्यापनकर्ता के भीतर "currentElements" सरणी में कोई तत्व नहीं हैं, इसलिए निष्पादन .resetForm()बिल्कुल कुछ नहीं करता है।

इस पर बग पोस्ट किए गए हैं।

जब तक वे उन्हें ठीक नहीं करते, तब तक आपको निक क्रेवर के उत्तर का उपयोग करने की आवश्यकता है, न कि तोते के स्वीकृत उत्तर का।

Comments

केवल जावास्क्रिप्ट दुनिया में यह मामलों की स्वीकार्य स्थिति है।

— स्टैकऑवरथ्रो

Answer 7

आप उपयोग कर सकते हैं:

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

Answer 8

मुझे लगता है कि हमें सब कुछ साफ करने के लिए इनपुट दर्ज करने की आवश्यकता है

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

Answer 9

यदि आप केवल स्पष्ट सत्यापन लेबल चाहते हैं, तो आप jquery.validate.js से रीसेट कोड का उपयोग कर सकते हैं ()

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

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

Answer 10

नीचे दिए गए बूटस्ट्रैप 3 कोड का उपयोग करने वालों के लिए पूरे फॉर्म को साफ करेगा: संदेश, आइकन और रंग ...

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

Answer 11

मैंने इसके साथ परीक्षण किया:

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

यह ठीक होगा, जब आपको इसे फिर से सत्यापित करने की आवश्यकता होगी।

Answer 12

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

यह सभी सत्यापन त्रुटियों को नष्ट कर देगा

Answer 13

मेरे मामले में दृष्टिकोण के साथ मदद की:

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

Comments

अन्य जवाबों में से किसी ने भी काम नहीं किया, लेकिन आपके उत्तर ने अच्छा काम किया, धन्यवाद

— अराश.जंडी

Answer 14

यदि आप क्लाइंट पक्ष में एक मान्यता को छिपाना चाहते हैं जो फॉर्म सबमिट का हिस्सा नहीं है तो आप निम्नलिखित कोड का उपयोग कर सकते हैं:

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

Answer 15

हर एक जवाब की कोशिश की। केवल एक चीज जो मेरे लिए काम करती थी:

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

का उपयोग करते हुए:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Answer 16

अन्य किसी भी समाधान ने मेरे लिए काम नहीं किया। resetForm()वास्तविक रूप को रीसेट करने के लिए स्पष्ट रूप से प्रलेखित किया गया है, उदाहरण के लिए फॉर्म से डेटा हटा दें, जो कि मैं नहीं चाहता। यह बस कभी-कभी ऐसा नहीं करता है, लेकिन त्रुटियों को हटा दें। आखिरकार मेरे लिए क्या काम किया है:

validator.hideThese(validator.errors());

Answer 17

रद्द पर क्लिक पर सत्यापन को हटाने के लिए इसका उपयोग करने का प्रयास करें

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

Comments

यह फ़ंक्शन रद्द बटन पर काम कर रहा है और आप इसे कहां उपयोग करना चाहते हैं, यह अच्छा है

— ।

Answer 18

उपयोग करने का प्रयास करें:

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

स्पष्ट बटन पर।

Answer 19

सत्यापन सारांश निकालने के लिए आप इसे लिख सकते हैं

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

हालाँकि, एक बार जब आप हटा देते हैं, तो यदि सत्यापन विफल हो जाता है तो यह सत्यापन सारांश नहीं दिखाएगा क्योंकि आपने इसे हटा दिया था। इसके बजाय नीचे दिए गए कोड का उपयोग करके छिपाने और प्रदर्शन का उपयोग करें

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

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

Answer 20

उपरोक्त किसी भी समाधान ने मेरे लिए काम नहीं किया। मैं उन पर अपना समय बर्बाद कर निराश था। हालांकि एक आसान उपाय है।

वैध स्थिति के लिए HTML मार्क की तुलना करके और त्रुटि स्थिति के लिए HTML मार्क की तुलना करके समाधान प्राप्त किया गया था।

कोई त्रुटि उत्पन्न नहीं होगी:

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

जब कोई त्रुटि होती है, तो यह div त्रुटियों से भरा होता है और वर्ग को सत्यापन-सारांश-त्रुटियों में बदल दिया जाता है:

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

समाधान बहुत सरल है। उस div का HTML साफ़ करें जिसमें त्रुटियां हैं और फिर वर्ग को मान्य स्थिति में बदल दें।

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

खुश कोडिंग।

Answer 21

यदि आप भी रीसेट करना चाहते हैं, numberOfInvalids()तो फ़ाइल लाइन संख्या: 415 में resetFormफ़ंक्शन में निम्न पंक्ति जोड़ें jquery.validate.js।

this.invalid = {};

Answer 22

मैंने अभी किया

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

इनपुट त्रुटि क्षेत्रों पर लाल सीमा हटाने के लिए।

Answer 23

$(FORM_ID).validate().resetForm(); अभी भी उम्मीद के मुताबिक काम नहीं कर रहा है।

मैं फॉर्म क्लियर कर रहा हूं resetForm()। यह एक को छोड़कर सभी मामलों में काम करता है !!

जब मैं अजाक्स के माध्यम से किसी भी फॉर्म को लोड करता हूं और अपने डायनेमिक को लोड करने के बाद फॉर्म वैलिडेशन लागू करता हूं HTML, तब जब मैं फॉर्म को रीसेट करने की कोशिश करता हूं resetForm()और यह विफल हो जाता है और यह भी सभी सत्यापन से अलग हो जाता है जो मैं फॉर्म एलिमेंट्स पर आवेदन कर रहा हूं।

तो कृपया अजाक्स लोड किए गए फॉर्म या मैन्युअल रूप से आरंभिक सत्यापन के लिए इसका उपयोग न करें।

PS आपको ऐसे परिदृश्य के लिए निक क्रेवर के उत्तर का उपयोग करने की आवश्यकता है जैसा कि मैंने समझाया।

Answer 24

validator.resetForm()विधि स्पष्ट त्रुटि पाठ। लेकिन अगर आप खेतों से RED बॉर्डर हटाना चाहते हैं तो आपको क्लास को हटाना होगाhas-error

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

Answer 25

ट्रैविस जे , जेलेकोविच और निक क्रेवर के दृष्टिकोण का उपयोग करके फ़ंक्शन ...

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

Answer 26

अपना कोड लिखें क्योंकि हर कोई एक अलग वर्ग के नाम का उपयोग करता है। मैं इस कोड द्वारा jQuery सत्यापन को रीसेट कर रहा हूं।

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