केवल Google Chrome में "अमान्य फ़ॉर्म नियंत्रण"

Question

नीचे दिया गया कोड सफारी में अच्छा काम करता है लेकिन क्रोम और फ़ायरफ़ॉक्स में फ़ॉर्म सबमिट नहीं होगा। क्रोम कंसोल त्रुटि लॉग करता है An invalid form control with name='' is not focusable। कोई विचार?

ध्यान दें कि नीचे दिए गए नियंत्रणों के नाम नहीं हैं, उन्हें सबमिशन के समय, नीचे दिए गए जावास्क्रिप्ट द्वारा नाम दिए गए नाम होने चाहिए। फॉर्म सफारी में काम करता है।

<form method="POST" action="/add/bundle"> 
<p> 
    <input type="text" name="singular" placeholder="Singular Name" required> 
    <input type="text" name="plural" placeholder="Plural Name" required> 
</p> 
<h4>Asset Fields</h4> 
<div class="template-view" id="template_row" style="display:none"> 
    <input type="text" data-keyname="name" placeholder="Field Name" required> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 
    <select data-keyname="fieldtype" required> 
        <option value="">Field Type...</option> 
        <option value="Email">Email</option> 
        <option value="Password">Password</option> 
        <option value="Text">Text</option> 
    </select>    
    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" data-keyname="label" value="label" name="label"> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique"> Unique
    <button class="add" type="button">+</button> 
    <button class="remove" type="button">-</button> 
</div> 

<div id="target_list"></div> 
    <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> 
</form>

<script> 
function addDiv()
{
    var pCount = $('.template-view', '#target_list').length;
    var pClone = $('#template_row').clone();
    $('select, input, textarea', pClone).each(function(idx, el){
        $el = $(this);
        if ((el).type == 'radio'){
            $el.attr('value', pCount + '_' + $el.data('keyname'));
        }
        else {
            $el.attr('name', pCount + '_' + $el.data('keyname'));
        };
    });
    $('#target_list').append(pClone);
    pClone.show();
}

function removeDiv(elem){
    var pCount = $('.template-view', '#target_list').length;
    if (pCount != 1)
    {
        $(elem).closest('.template-view').remove();
    }
};

$('.add').live('click', function(){
    addDiv();
});

$('.remove').live('click', function(){
    removeDiv(this);
});

$(document).ready(addDiv);

</script>

Comments

केवल सफल नियंत्रण भेजे जाएंगे। सफल होने के लिए, एक नियंत्रण का एक नाम होना चाहिए । अन्य आवश्यकताएं भी हैं (लिंक देखें)।

— RobG

रेडियो बटन के नाम हैं। बाकी सब कुछ जावास्क्रिप्ट के माध्यम से एक नाम मिलता है।

— एमएफबी

Answer 1

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

इसलिए, समस्या को हल करने के लिए, जब जावास्क्रिप्ट द्वारा एक नियंत्रण छिपाया जाता है, तो हमें उस नियंत्रण से 'आवश्यक' विशेषता को भी हटा देना चाहिए।

Comments

आह, कि बेकार है। समझ में आता है, हालांकि मुझे लगता है कि ब्राउज़र यह अनुमान नहीं लगा सकता है कि यदि क्षेत्र छिपा हुआ है (शायद एक टैब्ड फॉर्म ...), तो यह आपके इंटरफ़ेस को सत्यापन त्रुटि संदेशों से कैसे निपटना चाहता है।

— वेस्ले मर्च

धन्यवाद, यह काम करता है। यह शर्म की बात है कि क्रोम ऐसा करता है, लेकिन यह सिर्फ क्षेत्र को छोड़ देना चाहिए।

— ४'२० 29४

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

— हूं

यदि फ़ील्ड को छिपाए जाने की आवश्यकता नहीं है, तो क्या इसके बजाय इसे अक्षम करने के लिए और अधिक समझ में नहीं आएगा? ( stackoverflow.com/a/22753533/421243 )

— डेविड कुक

क्या होगा यदि यह त्रुटि अभी भी क्रोम पर होती है, लेकिन फ़ील्ड खाली नहीं है? क्या आपके पास इसका कोई उपाय है?

— लीह

Answer 2

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

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

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

इस समस्या का समाधान इस बात पर निर्भर करेगा कि साइट को कैसे काम करना चाहिए

उदाहरण के लिए यदि आप फॉर्म सबमिट नहीं करना चाहते हैं जब तक कि इस फ़ील्ड की आवश्यकता न हो तो आपको सबमिट बटन को अक्षम करना चाहिए

इसलिए div को दिखाने के लिए js कोड को सबमिट बटन को भी सक्षम करना चाहिए

आप बटन भी छिपा सकते हैं (अक्षम होना चाहिए और छिपा हुआ होना चाहिए क्योंकि अगर यह छिपा हुआ है लेकिन अक्षम नहीं है तो उपयोगकर्ता enterकिसी अन्य फ़ील्ड में प्रेस की तरह अन्य के साथ फ़ॉर्म सबमिट कर सकता है लेकिन यदि बटन अक्षम है तो ऐसा नहीं होगा

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

अगर किसी को ऐसा करने के लिए कोड की आवश्यकता है, तो आपको मुझे वही बताना चाहिए जिसकी आपको आवश्यकता है

Comments

हां .. क्या आप इसके लिए समाधान बता सकते हैं?

— रेक्स रेक्स

@RexRex मैं जवाब को संपादित करता हूं यह देखें कि क्या यह आपकी मदद करता है या मुझे बताता है कि आपको वास्तव में क्या चाहिए

— रॉबर्ट

@KaziMasumBillah मुझे समझ में नहीं आता कि क्या आप उत्तर में उदाहरण लिख सकते हैं

— रॉबर्ट

Answer 3

यदि आप एचटीएमएल 5 सत्यापन के बारे में परवाह नहीं करते हैं (हो सकता है कि आप जेएस या सर्वर पर मान्य हो), तो आप फॉर्म या इनपुट तत्वों में "नोवेलिडेट" जोड़ने का प्रयास कर सकते हैं।

Comments

लोगों को कभी भी इस तरह की चीजें नहीं करनी चाहिए कि वह html5 के साथ अपने js कोड का काम सिर्फ html5 को बंद न करें क्योंकि वह इससे निपट नहीं सकता है

— रॉबर्ट

मैं सहमत नहीं हूँ। आपको चीजों को अलग तरीके से करने के लिए बस एक अच्छे कारण की आवश्यकता है। वहाँ अभी भी बहुत सारे शक्तिशाली सत्यापन पुस्तकालय हैं। HTML5 सत्यापन आसान है, सेट अप करने के लिए त्वरित है। और सबसे ऊपर मानकों का पालन करना अच्छा है। लेकिन इसका मतलब यह नहीं है कि यह "सबसे अच्छा" समाधान है। नेवर से नेवर। यह हमेशा निर्भर करता है। हालांकि मैं इस बात से सहमत हूं कि आपको ग्राहक सत्यापन को पूरी तरह से "कभी नहीं" छोड़ना चाहिए। ;-)

Answer 4

HTML5 नियंत्रणों के लिए उचित टैग का उपयोग करने की कोशिश करें जैसे संख्या (पूर्णांक)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

दशमलव या फ्लोट के लिए

 <input type='number' min='0' step='Any'/>

चरण = 'कोई भी' इसके बिना आप किसी भी दशमलव या फ्लोट मान को दर्ज करने के लिए अपना फॉर्म जमा नहीं कर सकते हैं जैसे कि उपरोक्त क्षेत्र में 3.5 या 4.6।

पैटर्न को ठीक करने का प्रयास करें, इस समस्या को ठीक करने के लिए HTML5 नियंत्रणों के लिए लिखें।

Comments

आपने मेरी समस्या हल कर दी। लेकिन ध्यान दें कि क्षेत्र patternमें सार्वभौमिक रूप से स्वीकार्य प्रतीत नहीं होता हैtype="number"

— जोओ पिमेंटेल फरेरा

Answer 5

मुझे यह त्रुटि मिल रही थी, और यह निर्धारित किया कि यह वास्तव में एक ऐसे क्षेत्र पर था जो छिपा नहीं था।

इस मामले में, यह एक type="number"क्षेत्र था , जिसकी आवश्यकता है। जब इस क्षेत्र में कोई मूल्य दर्ज नहीं किया गया है, तो त्रुटि संदेश कंसोल में दिखाया गया है, और फॉर्म सबमिट नहीं किया गया है। एक मान दर्ज करना, और फिर इसे हटाने का मतलब है कि सत्यापन त्रुटि अपेक्षित रूप से दिखाई गई है।

मेरा मानना ​​है कि यह क्रोम में एक बग है: अब के लिए मेरा वैकल्पिक तरीका प्रारंभिक / डिफ़ॉल्ट मूल्य के साथ आना था।

Comments

क्रोम में संभव बग। मेरे साथ भी हुआ। +1

— गेमलीला

Answer 6

मेरे पास त्रुटि थी:

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

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

var telefono = document.getElementById("telefono");  
telefono.removeAttribute("required");

Answer 7

मुझे बग को ठीक करने के लिए कुछ ऐसा करना होगा, क्योंकि मेरे पास कुछ type="number"है min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

जे एस:

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

यदि मैं nullक्रोम में सभी छिपे हुए इनपुट फ़ील्ड सेट नहीं करता हूं, तब भी इनपुट को मान्य करने का प्रयास किया जाएगा।

Answer 8

कोई भी वैध काम नहीं करेगा।

<form action="whatever" method="post" novalidate>

Answer 9

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

मैंने बस उसी समूह का एक अतिरिक्त रेडियो इनपुट फ़ील्ड भाग जोड़ा जहां मैं चाहता था कि संदेश प्रदर्शित हो:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

अन्य 2 सक्रिय गोलियां अदृश्य हैं, यह एक isnt और यह सत्यापन संदेश और कोई कंसोल त्रुटियों को ट्रिगर नहीं करता है - एक हैक के बिट लेकिन इन दिनों क्या नहीं है ।।

Answer 10

यदि दशमलव प्रारूप जोड़ें तो यह त्रुटि मिलती है। मैं सिर्फ जोड़ता हूं

step="0.1"

Answer 11

मुझे यह त्रुटि संदेश तब मिला जब मैंने एक नंबर (999999) दर्ज किया जो उस फॉर्म से बाहर था जिसे मैंने फॉर्म के लिए सेट किया था।

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

Answer 12

$("...").attr("required"); and $("...").removeAttr("required"); 

मेरे लिए तब तक काम नहीं किया जब तक मैंने अपना सारा jQuery कोड उसके बीच नहीं डाला:

$(document).ready(function() {
    //jQuery code goes here
});

Answer 13

requiredआवश्यक = "आवश्यक" द्वारा प्रतिस्थापित करें

Comments

आवश्यक HTML5 विशेषता है और "आवश्यक" का एक ही अर्थ है आवश्यक = 'आवश्यक' क्योंकि इसका कोई अन्य गुण उपलब्ध नहीं है।

— इल्टर 24:15