नाम = '' के साथ एक अमान्य फ़ॉर्म नियंत्रण ध्यान देने योग्य नहीं है

Question

मुझे अपनी वेबसाइट पर एक तीव्र समस्या है। Google Chrome में कुछ ग्राहक मेरे भुगतान पृष्ठ पर आगे नहीं बढ़ पा रहे हैं। फॉर्म जमा करने का प्रयास करते समय मुझे यह त्रुटि मिलती है:

An invalid form control with name='' is not focusable.

यह जावास्क्रिप्ट कंसोल से है।

मैंने पढ़ा कि समस्या छिपी हुई फ़ील्ड के लिए आवश्यक विशेषता होने के कारण हो सकती है। अब समस्या यह है कि हम .net webforms आवश्यक फ़ील्ड सत्यापनकर्ताओं का उपयोग कर रहे हैं, और html5 आवश्यक विशेषता नहीं।

यह यादृच्छिक लगता है जिसे यह त्रुटि मिलती है। क्या कोई है जो इसके लिए एक समाधान जानता है?

Comments

यदि आपको लगता है कि यह छिपे हुए आवश्यक क्षेत्रों के कारण हो सकता है, तो शायद आपको यह देखना चाहिए कि क्या कुछ मामलों में वे क्षेत्र खाली रहते हैं? उदाहरण के लिए, यदि आप सत्र से user_id, या कुछ समान में भरते हैं, तो कुछ मामलों में यह रिक्त रह सकता है?

— dkasipovic

माना। Google Chrome में डेवलपर कंसोल (F12) खोलें और यह देखने के लिए कि इन क्षेत्रों के लिए मान रिक्त हैं या नहीं, फ़ील्ड के मान की जाँच करें।

— वेनिला थ्रिल

आपकी टिप्पणी के लिये धन्यवाद। यह मेरे लिए किसी भी तरह से नहीं है, हालांकि? मेरे पास एक सरल asp.net फ़ॉर्म है, जो asp.net फ़ॉर्म नियंत्रण का उपयोग करता है। इनपुट नियंत्रण फ्रेमवर्क द्वारा उत्पन्न होता है।

— MP1990

मैंने जाँच की और इनपुट फ़ील्ड में मान हैं। मेरे पास एक छिपा हुआ इनपुट फ़ील्ड है जिसका एक मूल्य भी है।

— MP1990

मुझे लगता है कि ऐसा तब होता है जब क्षेत्र की आवश्यकता होती है लेकिन सामान्य शब्दों में "दृश्यमान" नहीं होता है। यह मेरे साथ एक रूप में होता है, जो कई टैब में विभाजित होता है, जिस क्षेत्र में त्रुटि उत्पन्न हो जाती है वह एक टैब में होता है जो उस समय सक्रिय नहीं होता है जब मैंने फ़ील्ड से आवश्यक विशेषता को हटा दिया था और विशिष्ट सत्यापन किया था

— टेक्सविलर

Answer 1

Chrome पर यह समस्या तब होती है यदि कोई फ़ॉर्म फ़ील्ड सत्यापन विफल हो जाता है, लेकिन संबंधित अमान्य नियंत्रण के कारण संदेश को प्रदर्शित करने के लिए ब्राउज़र का प्रयास "कृपया इस फ़ील्ड को भरें" के आगे ध्यान केंद्रित करने में असमर्थ होने के कारण भी विफल हो जाता है।

कई कारणों से सत्यापन के ट्रिगर होने पर एक फॉर्म नियंत्रण ध्यान देने योग्य नहीं हो सकता है। नीचे वर्णित दो परिदृश्य सबसे प्रमुख कारण हैं:

• व्यवसाय तर्क के वर्तमान संदर्भ के अनुसार क्षेत्र अप्रासंगिक है। ऐसे परिदृश्य में, संबंधित नियंत्रण को DOM से हटा दिया जाना चाहिए या इसे requiredउस बिंदु पर विशेषता के साथ चिह्नित नहीं किया जाना चाहिए ।

• किसी इनपुट पर ENTER कुंजी दबाने वाले उपयोगकर्ता के कारण समयपूर्व सत्यापन हो सकता है । या फॉर्म में एक बटन / इनपुट नियंत्रण पर क्लिक करने वाला उपयोगकर्ता जिसने typeनियंत्रण की विशेषता को सही ढंग से परिभाषित नहीं किया है। यदि किसी बटन का प्रकार विशेषता पर सेट नहीं है button, तो Chrome (या उस मामले के लिए कोई अन्य ब्राउज़र) बटन क्लिक करने के बाद हर बार एक सत्यापन करता है क्योंकि submitबटन की typeविशेषता का डिफ़ॉल्ट मान है ।

  समस्या को हल करने के लिए, यदि आपके पास अपने पृष्ठ पर एक बटन है जो सबमिट या रीसेट के अलावा कुछ और करता है , तो हमेशा ऐसा करना याद रखें <button type="button">:।

इसके अलावा https://stackoverflow.com/a/7264966/1356062 देखें

Comments

यह समस्या तब उत्पन्न हो सकती है जब कोई पेज बनाया जाता है और उस ब्राउज़र के साथ परीक्षण किया जाता है जो क्लाइंटसाइड सत्यापन का समर्थन नहीं करता है या प्रपत्र प्रस्तुत करने (सफारी देखें) को नहीं रोकता है। एक ब्राउज़र के साथ अगला डेवलपर या उपयोगकर्ता जो वास्तव में क्लाइंटसाइड त्रुटियों पर फ़ॉर्म जमा करने से रोकता है (क्रोम देखें; छिपे हुए फ़ॉर्म तत्वों पर भी) एक दुर्गम रूप की समस्या में चलता है क्योंकि कोई फ़ॉर्म सबमिट नहीं कर सकता है और उसे कोई संदेश नहीं मिलता है ब्राउज़र या साइट। सत्यापन को पूरी तरह से रोकना 'अमान्य' के माध्यम से सही जवाब नहीं है क्योंकि क्लाइंटसाइड सत्यापन को उपयोगकर्ता इनपुट का समर्थन करना चाहिए। वेबसाइट बदलना इसका हल है।

— graste

विस्तृत उत्तर के लिए धन्यवाद। स्वीकार करना requiredया जोड़ना novalidateकभी भी एक अच्छा समाधान नहीं है।

— fatCop

यह सही उत्तर होना चाहिए। यदि आप html5 क्लाइंट साइड सत्यापन का उपयोग कर रहे हैं, तो novalidate जोड़ने से एक समस्या पैदा होती है जबकि दूसरा। खराब क्रोम के लिए एक इनपुट को मान्य करना चाहता है जो दिखाया नहीं गया है (और इस तरह की आवश्यकता नहीं होनी चाहिए)।

— kheit

मेरे मामले में सिर्फ उदाहरण के लिए, एक छिपा हुआ numberक्षेत्र था जहां डिफ़ॉल्ट मान सौतेले आकार द्वारा समान रूप से विभाजित नहीं किया गया था। चरण आकार बदलने से समस्या हल हो गई।

— जेम्स स्कॉट

@IgweKalu अच्छी कॉल। मैं एक textarea क्षेत्र पर TinyMCE को लागू करने में भाग गया। TinyMCE मूल प्रपत्र फ़ील्ड (जो "आवश्यक" था) को छुपाता है और इस त्रुटि को ट्रिगर करता है। समाधान, प्रपत्र से अब छिपी हुई "आवश्यक" विशेषता को हटा दें और इसे भरने के लिए अन्य विधि पर भरोसा करें।

— जॉन

Answer 2

novalidateप्रपत्र में एक विशेषता जोड़ने से मदद मिलेगी:

<form name="myform" novalidate>

Comments

यह सुरक्षा जोखिम नहीं है। (क्लाइंट-साइड चेक पर निर्भर है।) यह एक प्रयोज्य समस्या है।

— जुका के। कोरपेला

मैंने कोशिश की और पाया कि "नौसिखिए" की आवश्यकता नहीं है! मैंने बस अपने रूप को एक नाम दिया और सब कुछ ठीक चला!

— सनी शर्मा

मैंने कोशिश की और पाया कि "novalidate" वास्तव में आवश्यक है। केवल एक नाम जोड़ने से काम नहीं चलता।

— जेफ तियान

Novalidate जोड़ने से ग्राहक पक्ष सत्यापन बंद हो जाता है, जैसे रेल सिंपल फॉर्म रत्न। अंकित के उत्तर + डेविड ब्रूनो की टिप्पणी के अनुसार, समस्या क्षेत्रों की आवश्यकता नहीं है।

— स्टील

मुझे पता चला कि "नाम के साथ एक अमान्य रूप नियंत्रण = '' ध्यान देने योग्य नहीं है।" यह भी दिखाता है कि इनपुट एक हैं<fieldset>

— ऑस्करगिलफेक

Answer 3

अपने में form, आप छिपा दिया हो inputहोने requiredविशेषता:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

formउन तत्वों पर ध्यान केंद्रित नहीं कर सकते हैं, तो आप उन्हें हटाने के लिए requiredजावास्क्रिप्ट उन्हें संभाल करने में सभी छिपा इनपुट से भी कार्यान्वित एक सत्यापन समारोह यदि आप वास्तव में एक छिपा इनपुट की आवश्यकता है।

Comments

मैंने देखा कि ऐसा उन फ़ील्ड्स के साथ भी हो सकता है, जो "ईमेल" प्रकार के हैं, जो किसी को भी प्रदर्शित करने के लिए सेट नहीं हैं, क्रोम की वजह से समस्या प्रारूप को मान्य करने की कोशिश कर रही है।

— डेविड ब्रूनो

इसकी आवश्यकता नहीं है required। patternअकेले ही इस समस्या का कारण बन सकता है।

— पचेरियर

मेरे मामले में, फ़ॉर्म फ़ील्ड टाइप नहीं किए गए थे = "छिपा हुआ" वे केवल देखने से बाहर थे, उदाहरण के लिए टैब के साथ एक रूप में।

— जोश मैक

मेरे पास दो फॉर्म हैं, एक ए <input type="hidden" required />और दूसरा दोनों के साथ <input type="text" style="display: none" required />, और केवल वह जो क्रोम में त्रुटि प्रदर्शित कर रहा है display: none, वह है , जबकि "hidden"एक ठीक जमा करता है।

— पेरे

यह सही जवाब है। क्रोम एक ऐसे क्षेत्र को मान्य करने का प्रयास कर रहा है जिसे सीएसएस में छिपाया गया है। इसे अपने सत्यापन चेतावनी संदेश को दिखाने से रोक रहा है, और यह आपको इस तथ्य से सावधान कर रहा है।

— सुपरलाइनरी

Answer 4

यदि किसी और के पास यह मुद्दा है, तो मैंने उसी चीज का अनुभव किया। जैसा कि टिप्पणियों में चर्चा की गई थी, यह ब्राउज़र के कारण छिपे हुए क्षेत्रों को मान्य करने का प्रयास था। यह प्रपत्र में खाली फ़ील्ड ढूंढ रहा था और उन पर ध्यान केंद्रित करने की कोशिश कर रहा था, लेकिन क्योंकि वे सेट थे display:none;, यह नहीं कर सका। इसलिए त्रुटि।

मैं इसके समान कुछ का उपयोग करके इसे हल करने में सक्षम था:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

इसके अलावा, यह संभवतः Google Chrome में "अमान्य फ़ॉर्म नियंत्रण" का एक डुप्लिकेट है

Comments

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

— होरेशियो एल्डानेन

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

— जोनाथन DeMarks

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

— होराटियो एल्डेरण

मैं छिपे हुए क्षेत्रों को अक्षम करने के दृष्टिकोण से सहमत हूं। उनकी 'आवश्यक' विशेषताओं को हटाने से जानकारी खो जाती है जिसे उन्हें बाद में फिर से दिखाया जाना चाहिए। हालाँकि, उन्हें फिर से सक्षम करना इसको बनाए रखेगा।

— Druckles

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

— lewsid

Answer 5

मेरे मामले में समस्या के साथ input type="radio" requiredछिपा हुआ था:

visibility: hidden;

यह त्रुटि संदेश भी दिखाई देगा यदि आवश्यक इनपुट प्रकार radioया checkboxएक है display: none;सीएसएस संपत्ति।

यदि आप कस्टम रेडियो / चेकबॉक्स इनपुट बनाना चाहते हैं, जहां उन्हें UI से छिपाया जाना चाहिए और फिर भी requiredविशेषता को बनाए रखना चाहिए, तो आपको इसके बजाय इसका उपयोग करना चाहिए:

opacity: 0; सीएसएस संपत्ति

Comments

अपवाद के साथ एक ही मुद्दा है कि मैं selectivity.js लाइब्रेरी का उपयोग कर रहा हूं जो वर्तमान चयन बॉक्स को छिपाता है और जेएस और सीएसएस के साथ एक वैकल्पिक जेएस बॉक्स दिखाता है। जब मैं इस पर आवश्यक उपयोग करता हूं, तो यह त्रुटि प्रपत्र-फ़ील्ड को फेंक देता है। js: 8 create: 1 नाम के साथ एक अमान्य फ़ॉर्म नियंत्रण = 'लिस्टिंग_आईडी' फ़ोकस करने योग्य नहीं है। cny sugestion मैं इसे कैसे काम कर सकता हूँ?

— इंजमाम उल हसन

@InzmamGujjar जैसा कि मैंने समझा, आपका js प्लगइन अपनी कक्षाओं के साथ एक और चुनिंदा इनपुट बना रहा है। हो सकता है कि प्लगइन CSS कक्षाओं में फेरबदल किया जाए या name=""मूल के बजाय बनाए गए इनपुट का चयन किया जाए ?

— गूस

Answer 6

पिछले उत्तरों में से किसी ने भी मेरे लिए काम नहीं किया, और मेरे पास requiredविशेषता के साथ कोई छिपा हुआ क्षेत्र नहीं है ।

मेरे मामले में, समस्या एक <form>और फिर <fieldset>उसके पहले बच्चे के रूप में हुई, जो विशेषता के <input>साथ थी required। निकाला जा रहा है <fieldset>समस्या हल हो। या आप इसके साथ अपना फ़ॉर्म लपेट सकते हैं; यह HTML5 द्वारा अनुमत है।

मैं विंडोज 7 x 64, क्रोम संस्करण 43.0.2357.130 मीटर पर हूं।

Comments

एक ही समस्या थी, संकेत के लिए धन्यवाद। अपने समाधान के साथ इसे हल करने के लिए प्रबंधित, यह अजीब है।

— बेन

धन्यवाद, मेरे मामले में भी यही समस्या थी।

— शानदार

मेरे मामले में यह संकेत मेरी मदद करते हैं

— अंजा ईशमुखमीतोवा

फील्ड्स मेरी समस्या थी, साथ ही। मेरे मामले में, इसका उत्तर यहां पाया गया: stackoverflow.com/a/30785150/1002047 क्रोम बग होना प्रतीत होता है (चूंकि HTML प्रश्न में W3C के सत्यापनकर्ता का उपयोग करके मान्य होता है)। बस मेरे फ़ील्ड्स को divs में बदलने से समस्या हल हो गई।

— एरिक एस। बुलिंग्टन जूल

@ एरिकएस.बुलिंगटन धन्यवाद इशारा करने के लिए। मुझे उस उत्तर का पता नहीं था; उस उपयोगकर्ता के रूप में, मैंने इसे अपने फ़ॉर्म के टुकड़ों को "स्लाइसिंग" करके पाया। वैसे, मुझे क्रोम वर्जन नंबरिंग सिस्टम के बारे में पता नहीं है, लेकिन 4 साल में 124 से 130 की उम्र में यह बहुत बड़ा कदम नहीं लगता ...

— Pere

Answer 7

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

मैंने इसे अपनी स्टाइलशीट में पाया:

input[type="checkbox"] {
    visibility: hidden;
}

इसके साथ इसे ठीक करने के लिए सरल फिक्स था:

input[type="checkbox"] {
    opacity: 0;
}

Comments

यह भी समाधान था जो मुझे सबसे अच्छा काम करने के लिए मिला। यह त्रुटि संदेश को वास्तव में अदृश्य रूप नियंत्रण के पास प्रदर्शित करने की अनुमति देता है।

— राब

Answer 8

यह हो सकता है कि आपने आवश्यक विशेषता वाले फ़ील्ड (प्रदर्शन: कोई नहीं) छिपाए हों ।

कृपया जांचें कि सभी आवश्यक फ़ील्ड उपयोगकर्ता को दिखाई दे रहे हैं :)

Answer 9

मेरे लिए यह तब होता है, जब <select>'' '' के मान के साथ पूर्व-चयनित विकल्प के साथ एक क्षेत्र होता है :

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

दुर्भाग्य से यह प्लेसहोल्डर के लिए एकमात्र क्रॉस-ब्राउज़र समाधान है ( मैं 'चयन' बॉक्स के लिए प्लेसहोल्डर कैसे बनाऊं? )।

यह मुद्दा Chrome 43.0.2357.124 पर आता है।

Answer 10

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

Comments

सुझाव: $("input").attr("required", "true"); या $("input").prop('required',true);इसके विपरीत आप कर सकते हैं विशेषता / संपत्ति । >> jQuery इनपुट फ़ील्ड के लिए आवश्यक जोड़ेंremove

— fWd82

Answer 11

Select2 Jquery समस्या के लिए

HTML5 सत्यापन के कारण समस्या एक छिपे हुए अमान्य तत्व पर ध्यान केंद्रित नहीं कर सकती है। मैं इस मुद्दे पर आया जब मैं jQuery Select2 प्लगइन के साथ काम कर रहा था।

समाधान आप किसी ईवेंट श्रोता को फ़ॉर्म के प्रत्येक तत्व के 'अमान्य' ईवेंट को इंजेक्ट कर सकते हैं, ताकि आप HTML5 सत्यापन घटना से ठीक पहले हेरफेर कर सकें।

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Answer 12

यदि आपके पास इस तरह का कोड है तो यह संदेश दिखाएगा:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

Comments

मुझे पता है कि यह वही है जो मैं सिर्फ एक उदाहरण बनाता हूं, कुछ लोग कोड के साथ चीजों को बेहतर समझते हैं: डी

— रॉबर्ट

Answer 13

हाँ .. यदि किसी छुपे हुए प्रपत्र नियंत्रण के लिए आवश्यक फ़ील्ड है तो यह इस त्रुटि को दिखाता है। एक समाधान इस प्रपत्र नियंत्रण को निष्क्रिय करना होगा । ऐसा इसलिए है क्योंकि आमतौर पर यदि आप एक फॉर्म नियंत्रण छिपा रहे हैं तो यह है क्योंकि आप इसके मूल्य से चिंतित नहीं हैं। इसलिए यह फॉर्म कंट्रोल नाम वैल्यू पेयर वॉन्ट को फॉर्म सबमिट करते समय नहीं भेजा जाएगा।

Comments

इस विचार के लिए धन्यवाद! यह मेरे लिए उपयोगी था कि कभी-कभी सभी-छिपे हुए फ़ॉर्म तत्वों को टॉगल करने की परवाह किए बिना कि क्या किसी व्यक्ति की आवश्यकता है या नहीं, इसलिए मेरा तर्क अच्छा और सरल है :)

— Gabe Kopley

Answer 14

आप .removeAttribute("required")उन तत्वों के लिए प्रयास कर सकते हैं जो विंडो लोड के समय छिपे हुए हैं। जैसा कि यह काफी संभावना है कि विचाराधीन तत्व जावास्क्रिप्ट (टैब्ड फॉर्म) के कारण छिपा हुआ है

जैसे

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

यह कार्य करना चाहिए।

यह मेरे लिए काम किया ... चीयर्स

Answer 15

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

सत्यापन की कार्यक्षमता आवश्यक फ़ील्ड पर ध्यान केंद्रित करने और त्रुटि सत्यापन संदेश दिखाने की कोशिश करेगी लेकिन फ़ील्ड पहले से ही छिपी हुई है, इसलिए "नाम के साथ एक अमान्य फ़ॉर्म नियंत्रण = 'ध्यान देने योग्य नहीं है।" प्रकट होता है!

संपादित करें:

इस मामले को संभालने के लिए बस अपने सबमिट हैंडलर के अंदर निम्नलिखित शर्त जोड़ें

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

संपादित करें: स्पष्टीकरण

मान लें कि आप फ़ॉर्म को सबमिट करने के लिए छिपा रहे हैं, यह कोड गारंटी देता है कि फॉर्म / फ़ील्ड तब तक छिपे नहीं होंगे जब तक कि फॉर्म वैध नहीं हो जाते। इसलिए, यदि कोई फ़ील्ड मान्य नहीं है, तो ब्राउज़र उस पर बिना किसी समस्या के ध्यान केंद्रित कर सकता है क्योंकि यह फ़ील्ड अभी भी प्रदर्शित है।

Answer 16

ऐसी चीजें हैं जो अभी भी मुझे आश्चर्यचकित करती हैं ... मेरे पास दो अलग-अलग संस्थाओं के लिए गतिशील व्यवहार के साथ एक रूप है। एक इकाई को कुछ फ़ील्ड्स की आवश्यकता होती है जो दूसरे को नहीं। इसलिए, इकाई के आधार पर मेरा जेएस कोड, कुछ इस तरह करता है: $ ('# पीरियड')। $ ( "# Periodo-कंटेनर") छिपाने ()।;

और जब उपयोगकर्ता दूसरी इकाई का चयन करता है: $ ("# पीरियोडो-कंटेनर")। शो (); $ ('# पीरियडो')। प्रोप ('आवश्यक', सत्य);

लेकिन कभी-कभी, जब फ़ॉर्म सबमिट किया जाता है, तो समस्या प्रकट होती है: "नाम = आवधिक 'के साथ एक अमान्य फ़ॉर्म नियंत्रण फ़ोकस करने योग्य नहीं है (मैं आईडी और नाम के लिए समान मान का उपयोग कर रहा हूं)।

इस समस्या को ठीक करने के लिए, आपको यह सुनिश्चित करना होगा कि जिस इनपुट को आप सेट कर रहे हैं या 'आवश्यक' निकाल रहे हैं वह हमेशा दिखाई दे।

इसलिए, मैंने जो किया वह है:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Thats मेरी समस्या का हल ... अविश्वसनीय।

Answer 17

मेरे मामले में..

ng-showइस्तेमाल किया जा रहा था।
ng-ifअपनी जगह पर रखा गया था और मेरी त्रुटि तय की।

Comments

मेरा दिन बचाया। धन्यवाद

— सैयद Atir मोहिउद्दीन

Answer 18

कोणीय उपयोग के लिए:

एनजी-आवश्यक = "बूलियन"

यदि मूल्य सही है तो यह केवल html5 'आवश्यक' विशेषता को लागू करेगा।

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Answer 19

मैं यहाँ जवाब देने के लिए आया था कि मैंने </form>टैग बंद न करने और एक ही पृष्ठ पर एक से अधिक फ़ॉर्म होने के आधार पर इस समस्या को स्वयं ट्रिगर किया था । पहले फॉर्म में अन्य जगहों से फॉर्म इनपुट पर सत्यापन की मांग शामिल होगी। क्योंकि THOSE प्रपत्र छिपे हुए हैं, उन्होंने त्रुटि को ट्रिगर किया।

उदाहरण के लिए:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

ट्रिगर

नाम = 'userId' के साथ एक अमान्य फ़ॉर्म नियंत्रण ध्यान देने योग्य नहीं है।

नाम = 'पासवर्ड' के साथ एक अमान्य फ़ॉर्म नियंत्रण ध्यान देने योग्य नहीं है।

नाम के साथ एक अमान्य फ़ॉर्म नियंत्रण = 'पुष्टि' ध्यान देने योग्य नहीं है।

Answer 20

इसे ठीक करने के कई तरीके हैं

1. अपने फॉर्म में novalidate जोड़ें लेकिन यह पूरी तरह से गलत है क्योंकि यह फॉर्म सत्यापन को हटा देगा जिससे उपयोगकर्ताओं द्वारा गलत जानकारी दर्ज की जाएगी।

<form action="...." class="payment-details" method="post" novalidate>

2. उपयोग आवश्यक फ़ील्ड से आवश्यक विशेषता को हटा सकता है जो गलत भी है क्योंकि यह एक बार फिर से फॉर्म सत्यापन को हटा देगा।

   इसके अलावा:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. जब आप कुछ अन्य विकल्प करने के बजाय फ़ॉर्म सबमिट नहीं करने जा रहे हों तो आवश्यक फ़ील्ड को अक्षम कर सकते हैं। मेरी राय में यह अनुशंसित समाधान है।

   पसंद:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

या जावास्क्रिप्ट / jquery कोड के माध्यम से इसे अक्षम करें आपके परिदृश्य पर निर्भर करता है।

Answer 21

मुझे वही समस्या मिली जब मुझे Angular JS का उपयोग करना पड़ा। यह एनजी-छिपाने के साथ एक साथ आवश्यक उपयोग करने के कारण हुआ था । जब मैंने सबमिट बटन पर क्लिक किया था जब यह तत्व छिपा हुआ था तो यह त्रुटि हुई थी नाम = '' के साथ एक अमान्य फ़ॉर्म नियंत्रण ध्यान देने योग्य नहीं है। आखिरकार!

आवश्यकता के साथ एनजी-छिपाने का उपयोग करने के उदाहरण के लिए:

<input type="text" ng-hide="for some condition" required something >

मैंने इसके बजाय एनजी-पैटर्न के साथ आवश्यक प्रतिस्थापित करके इसे हल किया।

समाधान के उदाहरण के लिए:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Answer 22

अन्य AngularJS 1.x उपयोगकर्ताओं के लिए, यह त्रुटि दिखाई दी क्योंकि मैं DOM से इसे पूरी तरह से हटाने के बजाय प्रदर्शित करने से एक प्रपत्र नियंत्रण छिपा रहा था जब मुझे नियंत्रण पूरा करने की आवश्यकता नहीं थी।

मैं / पर div नियंत्रण की आवश्यकता के ng-ifबजाय ng-show/ ng-hideनियंत्रण के उपयोग के द्वारा इसे निर्धारित किया है ।

आशा है कि यह आपको साथी किनारे के उपयोगकर्ताओं की मदद करेगा।

Answer 23

मुझे अपना मामला बता दें क्योंकि यह उपरोक्त सभी समाधानों से अलग था। मेरे पास एक html टैग था जो सही ढंग से बंद नहीं हुआ था। तत्व नहीं था required, लेकिन यह एक hiddendiv में एम्बेडेड था

मेरे मामले में समस्या थी type="datetime-local", जो किसी कारण से थी- फार्म जमा करने पर मान्य की जा रही थी।

मैंने इसे बदल दिया

<input type="datetime-local" />

उस में

<input type="text" />

Answer 24

मैं यहाँ उत्तर देना चाहता था क्योंकि इन उत्तरों में से कोई भी, या किसी अन्य Google परिणाम ने मेरे लिए समस्या हल कर दी।

मेरे लिए इसका फील्डसेट्स या हिडन इनपुट्स से कोई लेना-देना नहीं था।

मैंने पाया कि अगर मैंने इसका इस्तेमाल किया max="5"(जैसे) तो यह त्रुटि पैदा करेगा। अगर मैंने इस्तेमाल किया maxlength="5" ... कोई त्रुटि नहीं।

मैं कई बार त्रुटि को दूर करने और त्रुटि को दूर करने में सक्षम था।

मुझे अभी भी नहीं पता है कि उस कोड का उपयोग करने से त्रुटि क्यों उत्पन्न होती है, जहां तक यह बताता है कि यह मान्य होना चाहिए, यहां तक ​​कि "मिनट" के बिना भी मुझे विश्वास है।

Comments

मेरा एक समान तरीके से हल किया गया था, लेकिन विन्यास था min='-9999999999.99' max='9999999999.99'।

— रिकार्डो ग्रीन

Answer 25

वैकल्पिक रूप से एक और मूर्खतापूर्ण उत्तर HTML5 प्लेसहोल्डर विशेषता का उपयोग करना है तो किसी भी जेएस सत्यापन का उपयोग करने की आवश्यकता नहीं होगी।

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

क्रोम किसी भी खाली, छिपे हुए और आवश्यक तत्वों को खोजने में सक्षम नहीं होगा। सरल उपाय।

उम्मीद है की वो मदद करदे। मैं इस समाधान के साथ पूरी तरह से हल कर रहा हूं।

Answer 26

मैं उसी समस्या को लेकर यहां आया था। मेरे लिए (आवश्यकतानुसार छिपे हुए तत्वों को हटा देना - अर्थात नौकरी ऐप में शिक्षा) आवश्यक झंडे थे।

मुझे एहसास हुआ कि दस्तावेज़ तैयार होने की तुलना में सत्यापनकर्ता तेजी से इंजेक्शन पर फायरिंग कर रहा था, इस प्रकार उसने शिकायत की।

मेरा मूल एनजी-आवश्यक टैग दृश्यता टैग (vm.flags.hasHighSchool) का उपयोग कर रहा था।

मैंने आवश्यक एनजी-आवश्यक सेट करने के लिए एक समर्पित ध्वज बनाकर हल किया = "vm.flags.highSchoolRequired=2"

मैंने उस ध्वज को स्थापित करने पर 10ms कॉलबैक जोड़ा और समस्या हल हो गई।

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

एचटीएमएल:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

Comments

वास्तव में आपका समाधान बहुत, बहुत जोखिम भरा है। धीमे सीपीयू वाले किसी भी व्यक्ति को अभी भी वही त्रुटि मिलेगी। यह (या होगा) ठेठ दौड़ की स्थिति। संभवतः पुराने स्मार्टफोन प्रभावित हो सकते हैं। तो कृपया इस समाधान से सतर्क रहें।

— ड्रेचेनफेल्स

Answer 27

सुनिश्चित करें कि आवश्यक विशेषता के साथ आपके फ़ॉर्म के सभी नियंत्रणों में नाम विशेषता सेट भी है

Answer 28

यह त्रुटि मेरे साथ हुई क्योंकि मैं आवश्यक फ़ील्ड के साथ एक फ़ॉर्म सबमिट कर रहा था जो भरे नहीं थे।

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

ठीक करने के लिए, सुनिश्चित करें कि आप आवश्यक फ़ील्ड को नियंत्रित करते हैं।

Answer 29

इसकी वजह यह है कि फॉर्म में आवश्यक विशेषता के साथ एक छिपा हुआ इनपुट है।

मेरे मामले में, मेरे पास एक चयन बॉक्स था और यह इनलाइन शैली का उपयोग करके jquery टोकनधारक द्वारा छिपा हुआ है। यदि मैं किसी भी टोकन का चयन नहीं करता हूं, तो ब्राउज़र फॉर्म सबमिट करने के लिए उपरोक्त त्रुटि फेंकता है।

इसलिए, मैंने इसे नीचे सीएसएस तकनीक का उपयोग करके तय किया:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Answer 30

जब एक HTML एलिमेंट को एक फॉर्म में उपयोग करने के लिए क्लोनिंग करता था तो मुझे वही त्रुटि मिली।

(मेरे पास आंशिक रूप से पूर्ण रूप है, जिसमें एक टेम्पलेट इंजेक्ट किया गया है, और फिर टेम्पलेट को संशोधित किया गया है)

त्रुटि मूल फ़ील्ड को संदर्भित कर रही थी, न कि क्लोन किए गए संस्करण को।

मुझे मान्यता प्राप्त करने से पहले कोई भी ऐसा तरीका नहीं मिला, जो फ़ॉर्म को फिर से मूल्यांकन करने के लिए मजबूर कर दे (इस उम्मीद में कि यह पुराने क्षेत्रों के किसी भी संदर्भ से छुटकारा नहीं देगा)।

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