गतिशील इंजेक्शन वाले तत्वों के साथ काम नहीं कर रहा jquery.validate.unobtrusive


99

मैं साथ काम कर रहा हूं ASP.Net MVC3, क्लाइंट सत्यापन का उपयोग करने का आसान तरीका सक्षम हो जाएगा jquery.validate.unobtrusive। सब कुछ ठीक काम करता है, सामान के लिए जो सर्वर से सही है।

लेकिन जब मैंने जावास्क्रिप्ट के साथ कुछ नए 'इनपुट' इंजेक्ट करने की कोशिश की, और मुझे पता था कि मुझे $.validator.unobtrusive.parse()मान्यताओं को फिर से बनाने के लिए कॉल करने की आवश्यकता है । लेकिन फिर भी, वे सभी गतिशील इंजेक्ट किए गए फ़ील्ड कार्य नहीं कर रहे हैं।

इससे भी बदतर, मैं मैन्युअल रूप से उपयोग करने के लिए बाध्य करने की कोशिश करता हूं jquery.validateऔर यह भी काम नहीं कर रहा है। कोई विचार?


1
यदि आप Google से यहां आए हैं तो आप शायद @Sundara Prabu के उत्तर की तलाश कर रहे हैं क्योंकि अन्य जो बड़े पैमाने पर अपवित्र हैं पुराने हैं।
मफिन मैन

जवाबों:


65

मैंने jquery.validate.unobtrusive लाइब्रेरी के लिए एक एक्सटेंशन बनाया है जिसने मेरी स्थिति के लिए इस समस्या को हल किया है - यह रुचि का हो सकता है।

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/


मुझे लगता है कि मुझे आपके जवाब को सही मानना ​​चाहिए। BTW, क्या आपकी लाइब्रेरी नवीनतम MVC RC के साथ काम करती है? या उन्होंने अभी तय किया है कि
xandy

1
ऊपर दिए गए कोड का उपयोग करते समय, सुनिश्चित करें कि आप इसे टिप्पणी में कोड को शामिल करने के लिए अपडेट करें अन्यथा यह टूट सकता है। विशेष रूप से, आईडी का चयन करने के लिए दो चयनकर्ता लाइनों को बदलें।
रयान ओ'नील

1
अंत में कुछ डिबगिंग के बाद मेरे परिदृश्य के लिए यह काम करने में सक्षम था। ऐसा प्रतीत होता है कि इनपुट चयनकर्ता में पास नहीं होना चाहिए, लेकिन कॉल के कारण इनपुट के अभिभावक या प्रपत्र $.validator.unobtrusive.parse()। इसके अलावा, यह केवल नए नियमों को जोड़ने के लिए प्रतीत होता है, लेकिन मौजूदा नियमों के अपडेट नहीं उठाते हैं?
लैम्बिनेटर

5
इस उत्तर में कम से कम ब्लॉग पोस्ट की भालू की हड्डियाँ होनी चाहिए। लिंक केवल उत्तर आम तौर पर SO
Liam

8
यदि यह उत्तर 3+ वर्ष पुराना है, तो यह अत्यंत उपयोगी होगा यदि आप इस साइट पर उत्तर के आवश्यक भागों को पोस्ट कर सकते हैं, या आपके पोस्ट को हटाए जा रहे जोखिमों को अक्सर पूछे जाने वाले प्रश्न देखें जहां यह उत्तर देता है कि 'लिंक से मुश्किल से अधिक है '। यदि आप चाहें तो आप अभी भी लिंक को शामिल कर सकते हैं, लेकिन केवल 'संदर्भ' के रूप में। लिंक की आवश्यकता के बिना जवाब अपने दम पर खड़ा होना चाहिए।
टैरिन

159

मैंने Xhalent के दृष्टिकोण की कोशिश की, लेकिन दुर्भाग्य से यह मेरे लिए काम नहीं कर रहा था। रॉबिन के दृष्टिकोण ने काम नहीं किया और काम नहीं किया। यह गतिशील रूप से जोड़े गए तत्वों के लिए बहुत अच्छा काम करता है, लेकिन अगर आपने डोम से सभी सत्यापन विशेषताओं और स्पैन को हटाने के लिए JQuery का उपयोग करने की कोशिश की, तो सत्यापन लाइब्रेरी अभी भी उन्हें मान्य करने का प्रयास करेगी।

हालाँकि, यदि आप "वैधीकरणडेटा" के अलावा फॉर्म के "विनीत विचलन" डेटा को हटाते हैं, तो यह डायनामिक रूप से जोड़ने और हटाने वाले तत्वों के लिए एक आकर्षण की तरह काम करता है, जिन्हें आप मान्य करते हैं या मान्य नहीं हैं।

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

2
Xhalent ने पहले तो मेरे लिए काम नहीं किया, फिर मैंने देखा कि पार्स को नए तत्वों के लिए एक कंटेनर पास किया जाना चाहिए, तत्वों को खुद नहीं - त्वरित फिक्स तत्व (ओं) के बजाय पूरे फॉर्म को पास करना होगा - फिर यह एक जादू की तरह काम किया।
प्रति हॉर्नशोज-शियरबेक

1
किसी भी विचार में यह क्यों कहा गया validatorहै परिभाषित नहीं है? मेरे पास सत्यापन और सत्यापन दोनों हैं। विनीत संदर्भित। मान्यकरण तब तक काम करता है जब तक कि मैं इन कोड को कॉल नहीं करता
Shawn Mclean

4
धन्यवाद। यह AJAX कॉल के माध्यम से जोड़े गए ASP.MVC आंशिक विचारों में पेज के लिए जोड़ी गई सामग्री के लिए काम करता है।
मैक्जिम कोज़्लेंको

धन्यवाद इससे मदद मिली। लेकिन मुझे एक समस्या का सामना करना पड़ रहा है जहां मैं पृष्ठ पर समझौते का उपयोग कर रहा हूं और यदि समझौते का पतन हो गया है, तो यह मान्यताओं को आग नहीं लगा सकता है। मैं इसे कैसे ठीक करूं? मुझे पता है कि अगर मैं MVC3 विनीत के बजाय सामान्य jquery मान्य प्लगइन के लिए गया था, तो मुझे कहना था$('#form').validate({ignore: ""})
पार्श्व

1
यह मेरे लिए PHP में काम करता था। बस इस जानकारी को जोड़ना क्योंकि हर टिप्पणी .NET MVC को इंगित करती है। : पी
finnTheHumin

42

मुझे वास्तव में @viggity और @Robins समाधान की सादगी पसंद है, इसलिए मैंने इसे एक त्वरित छोटे प्लगइन में बदल दिया:

(function ($) {

    $.fn.updateValidation = function () {
        var $this = $(this);
        var form = $this.closest("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");

        $.validator.unobtrusive.parse(form);

        return $this;
    };
})(jQuery);

उदाहरण का उपयोग:

$("#DischargeOutcomeNumberOfVisits")
    .attr("data-val-range-min", this.checked ? "1" : "2")
    .updateValidation();

$ .validator.unobtrusive.parse ("#" + form.attr ("id") को प्रतिस्थापित करें; $ के साथ .validator.unobtrusive.parse (फॉर्म);
सायक्लियन डिक

आप केवल 1 तत्व के रूप में निकटतम रिटर्न के रूप में .first () भी सुरक्षित रूप से निकाल सकते हैं।
18

अच्छा, मुझे यह सरल तरीका पसंद है
nixon

डेटा-वैल विशेषताओं को जोड़ने और हटाने दोनों के लिए खूबसूरती से काम करता है
जूलियन डोरमन

33

मुझे भी यही तकलीफ़ है। मुझे पता चला कि दो बार एक ही फॉर्म पर $ .validator.unobtrusive.parse () कॉल करना संभव नहीं है। सर्वर से शुरू में फॉर्म को लोड करते समय फॉर्म को विनीत पुस्तकालय द्वारा स्वचालित रूप से पार्स किया जाता है। जब आप किसी इनपुट तत्व को गतिशील रूप से जोड़ते हैं और $ .validator.unobtrusive.parse () को फिर से कॉल करते हैं, तो यह काम नहीं करेगा। वही parseElement () के लिए जाता है।

विनीत काम सभी नियमों और संदेशों को सेट करने के लिए jquery के मान्य प्लगइन की मान्य विधि को कॉल करता है। समस्या यह है कि जब दोबारा बुलाया जाता है, तो प्लगइन अपने दिए गए नियमों के नए सेट को अपडेट नहीं करता है।

मुझे एक क्रूड सॉल्यूशन मिला: असंबद्ध लिब पर पार्स विधि को कॉल करने से पहले, मैंने फॉर्म वैलिडेटर को फेंक दिया:

$('yourForm').removeData("validator");

अब, जब वैध विधि को विनीत काम द्वारा बुलाया जाता है, तो सभी नियम और संदेश गतिशील रूप से जोड़े गए इनपुट सहित पुन: बनाए जाते हैं।

उम्मीद है की यह मदद करेगा


एक +1 का वर्णन करता है - यह एक क्रूड सॉल्यूशन है जैसा आपने खुद कहा है, लेकिन यह बहुत स्पष्ट है कि यह क्या करता है और आप बाद में किस अवस्था में बचे हैं
Per Hornshøj-Schierbeck

2
ब्रैड विल्सन ब्लॉग से: "आप एकल HTML तत्व को पार्स करने के लिए jQuery.validator.unobtrusive.parseElement () फ़ंक्शन भी कह सकते हैं।" कोई मदद?
jamesfm

@Per Hornshøj-Schierbeck: @Robin van der Knaap: मैंने इसका पता लगाने के लिए पिछले 2-3 घंटे बिताए हैं !! वैसे भी- यह पूरी तरह से काम किया। क्रूड मुझे लगता है कि मुझे इसका उपयोग नहीं करना चाहिए, हालांकि- मैं ऐसा क्यों नहीं करना चाहूंगा?
केटीएफ

2
समाधान थोड़ा कच्चा है क्योंकि गतिशील रूप से जोड़े गए सत्यापनकर्ता सहित सभी सत्यापनकर्ताओं को हटा दिया जाता है और फिर से बहाल किया जाता है। यह बेहतर होगा कि केवल डायनेमिक रूप से जोड़ा गया सत्यापनकर्ता अपडेट किया गया हो। @Xhalent उनके जवाब में एक क्लीनर समाधान प्रदान करता है, लेकिन मूल रूप से MS से विनीत पुस्तकालय को इस परिदृश्य के लिए अद्यतन किया जाना चाहिए।
रॉबिन वैन डेर कन्नाप

9

मैं MVC 4 और JQuery 1.8 का उपयोग कर रहा हूं , ऐसा लगता है कि JQuery को अजाक्स, या डोम में Jquery के माध्यम से गतिशील रूप से इंजेक्ट की गई सामग्री के सत्यापन के लिए सक्षम करने के लिए निम्न कोड की आवश्यकता है।

मैंने एक मॉड्यूलर फ़ंक्शन बनाया है जो नए जोड़े गए तत्व के जेक्वेरी ऑब्जेक्ट को स्वीकार करता है। यदि आपने tblContactsबटन के क्लिक पर Jquery का उपयोग करके आईडी के साथ एक नई तालिका क्लोन की है, तो नीचे दिए गए फ़ंक्शन को अपनी js फ़ाइल में शामिल करें

function fnValidateDynamicContent(element) {
    var currForm = element.closest("form");
    currForm.removeData("validator");
    currForm.removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(currForm);
    currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors.
}

और इसे इस तरह से कॉल करें:

fnValidateDynamicContent("#tblContacts")

currform.validate (); वास्तव में curForm.validate () होना चाहिए; (टाइपो)। हालांकि साझा करने के लिए धन्यवाद, इसने मेरे लिए काम किया
जॉन मैक

1
@ जॉनमो ने अब टाइपो तय किया
सुंदर

यह केवल एक है जिसने मेरे लिए काम किया (mvc 4 और jquery 1.10)
The Muffin Man

4

क्यों नहीं नियम फ़ंक्शन का उपयोग सीधे jquery सत्यापन डॉक से किया जाता है। ऐशे ही:

$('#newField0').rules('add', {
    required: true,
    minlength: 2
});
//use Html.ValidationMessage will renders a span element, unobtrusive need it to display errors
$('@Html.ValidationMessage("newField0")').insertAfter('#newField0');

2

ऊपर दिए गए जवाब के रूप में चिह्नित Xhalent के समाधान से लेते हुए, मैंने इस पर थोड़ा विस्तार किया।

$.validator.unobtrusive.parseDynamicContent = function (selector) {
    var $selector = $(selector),
        $jqValUnob = $.validator.unobtrusive,
        selectorsDataValAttr = $selector.attr('data-val'),
        $validationInputs = $selector.find(':input[data-val=true]');

    if ((selectorsDataValAttr !== 'true') && 
        ($validationInputs.length === 0)) { 
        return; 
    }

    if (selectorsDataValAttr === 'true') {
        $jqValUnob.parseElement(selector, true);
    }

    $validationInputs.each(function () {
        $jqValUnob.parseElement(this, true);
    });

    //get the relevant form
    var $form = $selector.first().closest('form');

    $jqValUnob.syncValdators($form);
};

/* synchronizes the unobtrusive validation with jquery validator */
$.validator.unobtrusive.syncValdators = function ($form) {
    if ($.hasData($form[0])) {
        var unobtrusiveValidation = $form.data('unobtrusiveValidation'),
            validator = $form.validate();

        // add validation rules from unobtrusive to jquery
        $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
            if (validator.settings.rules[elname] == undefined) {
                var args = {};
                $.extend(args, elrules);
                args.messages = unobtrusiveValidation.options.messages[elname];
                $("[name='" + elname + "']").rules("add", args);
            } else {
                $.each(elrules, function (rulename, data) {
                    if (validator.settings.rules[elname][rulename] == undefined) {
                        var args = {};
                        args[rulename] = data;
                        args.messages = unobtrusiveValidation.options.messages[elname][rulename];
                        $("[name='" + elname + "']").rules("add", args);
                    }
                });
            }
        });
        // remove all validation rules from jquery that arn't in unobtrusive
        $.each(validator.settings.rules, function (elname, elrules) {
            if (unobtrusiveValidation.options.rules[elname] === undefined) {
                delete validator.settings.rules[elname];
            } else {
                $.each(elrules, function (rulename, data) {
                    if (rulename !== "messages" && unobtrusiveValidation.options.rules[elname][rulename] === undefined) {
                        delete validator.settings.rules[elname][rulename];
                    }
                });
            }
        });
    }        
};

$.validator.unobtrusive.unparseContent = function (selector) {
    var $selector = $(selector);

    // if its  a text node, then exit
    if ($selector && $selector.length > 0 && $selector[0].nodeType === 3) {
        return;
    }

    var $form = $selector.first().closest('form'), 
        unobtrusiveValidation = $form.data('unobtrusiveValidation');

    $selector.find(":input[data-val=true]").each(function () {
        removeValidation($(this), unobtrusiveValidation);
    });
    if ($selector.attr('data-val') === 'true') {
        removeValidation($selector, unobtrusiveValidation);
    }
    $.validator.unobtrusive.syncValdators($form);
};

function removeValidation($element, unobtrusiveValidation) {
    var elname = $element.attr('name');
    if (elname !== undefined) {
        $element.rules('remove');
        if (unobtrusiveValidation) {
            if (unobtrusiveValidation.options.rules[elname]) {
                delete unobtrusiveValidation.options.rules[elname];
            }
            if (unobtrusiveValidation.options.messages[elname]) {
                delete unobtrusiveValidation.options.messages[elname];
            }
        }
    }
}

तो मूल रूप से यह अभी भी ऊपर Xhalent के समाधान के रूप में ही काम करता है लेकिन मैंने उन तत्वों के लिए नियम निकालने की क्षमता जोड़ी है जिन्हें आप डोम से हटाते हैं। इसलिए, जब आप डोम से तत्वों को हटाते हैं और आप चाहते हैं कि उन सत्यापन नियमों को भी हटा दिया जाए, तो कॉल करें:

$.validator.unobtrusive.unparseContent('input.something');

1

मुझे मेरे कोड में @ Xhalent की कोड स्क्रिप्ट मिली और इसे हटाने जा रहा था क्योंकि मैं इसका उपयोग नहीं कर रहा था, जो मुझे इस SO प्रश्न की ओर ले जाता है।

यह कोड बहुत साफ और सरल है:

jQuery.fn.unobtrusiveValidationForceBind = function () {
    //If you try to parse a form that is already parsed it won't update
    var $form = this
       .removeData("validator") /* added by the raw jquery.validate plugin */
            .removeData("unobtrusiveValidation");  /* added by the jquery     unobtrusive plugin */

    $form.bindUnobtrusiveValidation();
}

फिर, इस jQuery एक्सटेंशन को कॉल करने के लिए, बस फॉर्म को हथियाने के लिए एक चयनकर्ता का उपयोग करें:

$('#formStart').unobtrusiveValidationForceBind();

आहा!


1

मैंने जवाब देने की कोशिश की और पहले तो सब कुछ काम का लग रहा था। लेकिन थोड़ी देर बाद मैंने देखा कि सत्यापन अधिक गतिशील रूप से मेरे द्वारा जोड़े गए आइटम को धीमा कर देता है। कारण यह था कि उनका समाधान इवेंट हैंडलर को नहीं हटाता है, लेकिन हर बार नए जोड़ देता है। इसलिए यदि आप 5 आइटम जोड़ते हैं तो सत्यापन केवल एक बार के बजाय 6 बार निष्पादित किया जाता है। इसे ठीक करने के लिए आपको ईवेंट को अतिरिक्त रूप से हटाने के लिए कॉल को हटाना होगा।

$("form").removeData("validator")
         .removeData("unobtrusiveValidation")
         .off("submit.validate click.validate focusin.validate focusout.validate keyup.validate invalid-form.validate");
$.validator.unobtrusive.parse("form");

1

गतिशील सामग्री के मामले में आपको नीचे के रूप में विनीत मान्यताओं को अपडेट करने की आवश्यकता है और Formसबमिट करते समय यह जांचें कि क्या मान्य है।

function UpdateUnobtrusiveValidations(idForm) {
    $(idForm).removeData("validator").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(idForm));
};


$('#idDivPage').on('click', '#idSave', function (e) {
    e.preventDefault();
    if (!$('#idForm').valid()) {
        // Form is invalid … so return
        return false;
    }
    else {
        // post data to server using ajax call
        // update Unobtrusive Validations again
        UpdateUnobtrusiveValidations('#idForm');
    }
});

0

मैं कुछ समय के लिए इसके चारों ओर चक्कर लगा रहा था, समाधानों को कुरेद रहा था और बाद में फिर से कोशिश कर रहा था (जब मेरे पास कुछ खाली समय था, यह विश्वास है या नहीं)।

मुझे यकीन नहीं है कि यह व्यवहार jquery के नए संस्करणों में बदल गया होगा (हम 1.7.2 का उपयोग कर रहे हैं) क्योंकि यह धागा बनाया गया था या अंतिम टिप्पणी की गई थी, लेकिन मैंने पाया कि .parseElement(inputElement)जब मैं गतिशील रूप से बनाए गए तत्वों को एक फॉर्म में जोड़ने की कोशिश करता हूं तो ठीक काम करता है कि पहले से ही एक सत्यापनकर्ता लोड है। यह पहले से ही @jamesfm (फ़रवरी 15 '11) द्वारा उपरोक्त टिप्पणियों में से एक में सुझाया गया था, लेकिन मैंने इसे पहली बार अनदेखा किया था जब मैं इस पर काम कर रहा था। इसलिए मैं इसे और अधिक स्पष्ट करने के लिए एक अलग उत्तर के रूप में जोड़ रहा हूं और क्योंकि मुझे लगता है कि यह एक अच्छा समाधान है और इसके लिए बहुत अधिक ओवरहेड की आवश्यकता नहीं है। यह बाद के उत्तरों में उठाए गए सभी मुद्दों के लिए प्रासंगिक नहीं हो सकता है, लेकिन मुझे लगता है कि यह मूल प्रश्न का समाधान होगा। यहाँ है कि मुझे मेरा काम कैसे मिला:

//row & textarea created dynamically by an async ajax call further up in the code
var row = ...; //row reference from somewhere
var textarea = row.find("textarea");
textarea.val("[someValue]");

//add max length rule to the text area
textarea.rules('add', {
    maxlength: 2000
});
//parse the element to enable the validation on the dynamically added element
$.validator.unobtrusive.parseElement(textarea);

0

सबसे पहले, मुझे लगता है कि कॉल को .validator के लिए होना चाहिए, मान्य नहीं तो आपको फॉर्म की आईडी में पास होना चाहिए

$.validator.unobtrusive.parse("#id");

मुझे लगता है कि आपने jquery.validate & jquery.validate.unobtrusive स्क्रिप्ट दोनों को लोड किया है और इसे Html.EnableClientValidation () और Html.EnableUnobtrusJavaScript () विधियों कहा जाता है? क्या आप अपने आधार पृष्ठ और गतिशील रूप से लोड किए गए फ़ॉर्म के लिए कोड नमूना पोस्ट कर सकते हैं?
क्रिस ऑलमार्क

0

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

function resetValidator($form: JQuery) {
    $form.validate().destroy();

    //reset unobtrusive validation summary, if it exists
    $form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul").empty();

    //reset unobtrusive field level, if it exists
    $form.find("[data-valmsg-replace]")
        .removeClass("field-validation-error")
        .addClass("field-validation-valid")
        .empty();

    $form.removeData("unobtrusiveValidation");
}

प्रपत्र में इनपुट को गतिशील रूप से संशोधित करने से पहले आप इसे कहते हैं। आप इसके बाद सत्यापन को पुन: स्थापित करते हैं।

resetValidator($form);
//add or remove inputs here ...
$.validator.unobtrusive.parse($form);

नोट: यदि कुछ या सभी इनपुट मान्य किए गए हैं और त्रुटियां हैं, तो उन त्रुटियों को रीसेट कर दिया जाएगा ... लेकिन वे सही ढंग से अगली मान्यता पर वापस आ जाएंगे।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.