“ การควบคุมฟอร์มไม่ถูกต้อง” เฉพาะใน Google Chrome

โค้ดด้านล่างทำงานได้ดีใน Safari แต่ใน Chrome และ Firefox จะไม่ส่งแบบฟอร์ม An invalid form control with name='' is not focusableโครเมี่ยมคอนโซลบันทึกข้อผิดพลาด ความคิดใด ๆ ?

โปรดทราบว่าในขณะที่ตัวควบคุมด้านล่างไม่มีชื่อ แต่ก็ควรมีชื่อในขณะที่ส่งโดยใช้ Javascript ด้านล่าง แบบฟอร์มใช้งานได้ใน Safari

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

Chrome ต้องการมุ่งเน้นไปที่การควบคุมที่จำเป็น แต่ยังคงว่างเปล่าเพื่อให้สามารถแสดงข้อความ "โปรดกรอกข้อมูลในฟิลด์นี้" อย่างไรก็ตามหากตัวควบคุมซ่อนอยู่ในจุดที่ Chrome ต้องการให้ข้อความปรากฏขึ้นนั่นคือในขณะที่ส่งแบบฟอร์ม Chrome จะไม่สามารถมุ่งเน้นไปที่ตัวควบคุมได้เนื่องจากถูกซ่อนไว้ดังนั้นแบบฟอร์มจะไม่ส่ง

ดังนั้นเพื่อหลีกเลี่ยงปัญหาเมื่อจาวาสคริปต์ซ่อนตัวควบคุมเราจะต้องลบแอตทริบิวต์ "required" ออกจากตัวควบคุมนั้นด้วย

จะแสดงข้อความนั้นหากคุณมีรหัสดังนี้:

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

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

วิธีแก้ปัญหานี้จะขึ้นอยู่กับว่าไซต์ควรทำงานอย่างไร

ตัวอย่างเช่นหากคุณไม่ต้องการให้ส่งแบบฟอร์มเว้นแต่จำเป็นต้องกรอกข้อมูลในช่องนี้คุณควรปิดใช้งานปุ่มส่ง

ดังนั้นรหัส js ที่จะแสดง div ควรเปิดใช้งานปุ่มส่งด้วย

คุณสามารถซ่อนปุ่มได้ด้วย (ควรปิดใช้งานและซ่อนไว้เพราะหากซ่อนไว้ แต่ไม่ปิดใช้งานผู้ใช้สามารถส่งแบบฟอร์มด้วยวิธีอื่น ๆ เช่นกดenterในช่องอื่น ๆ แต่ถ้าปุ่มถูกปิดใช้งานสิ่งนี้จะไม่เกิดขึ้น

หากคุณต้องการส่งแบบฟอร์มหาก div ถูกซ่อนอยู่คุณควรปิดการใช้งานอินพุตที่จำเป็นใด ๆ ภายในและเปิดใช้งานอินพุตในขณะที่คุณกำลังแสดง div

หากมีใครต้องการรหัสในการทำเช่นนั้นคุณควรบอกสิ่งที่คุณต้องการ

หากคุณไม่สนใจเกี่ยวกับการตรวจสอบความถูกต้องของ HTML5 (บางทีคุณกำลังตรวจสอบความถูกต้องใน JS หรือบนเซิร์ฟเวอร์) คุณสามารถลองเพิ่ม "novalidate" ลงในฟอร์มหรือองค์ประกอบอินพุต

พยายามใช้แท็กที่เหมาะสมสำหรับการควบคุม HTML5 Like for Number (จำนวนเต็ม)

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

สำหรับทศนิยมหรือลอย

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

step = 'Any'หากไม่มีสิ่งนี้คุณจะไม่สามารถส่งแบบฟอร์มของคุณโดยป้อนค่าทศนิยมหรือค่าลอยเช่น 3.5 หรือ 4.6 ในฟิลด์ด้านบน

ลองแก้ไขรูปแบบพิมพ์สำหรับตัวควบคุม HTML5 เพื่อแก้ไขปัญหานี้

ฉันได้รับข้อผิดพลาดนี้และพบว่ามันเกิดขึ้นจริงในฟิลด์ที่ไม่ได้ซ่อนอยู่

ในกรณีนี้มันเป็นtype="number"ฟิลด์ที่จำเป็น เมื่อไม่เคยป้อนค่าลงในฟิลด์นี้ข้อความแสดงข้อผิดพลาดจะแสดงในคอนโซลและจะไม่มีการส่งแบบฟอร์ม การป้อนค่าแล้วลบออกหมายความว่าข้อผิดพลาดการตรวจสอบถูกแสดงตามที่คาดไว้

ฉันเชื่อว่านี่เป็นข้อบกพร่องใน Chrome: วิธีแก้ปัญหาของฉันในตอนนี้คือการหาค่าเริ่มต้น / ค่าเริ่มต้น

ฉันมีข้อผิดพลาด:

การควบคุมฟอร์มที่ไม่ถูกต้องด้วย name = 'telefono' ไม่สามารถโฟกัสได้

สิ่งนี้เกิดขึ้นเนื่องจากฉันไม่ได้ใช้ฟิลด์บังคับอย่างถูกต้องซึ่งเปิดใช้งานและปิดใช้งานเมื่อคลิกที่เครื่องหมายถูก วิธีแก้ไขคือลบrequiredแอตทริบิวต์เมื่อใดก็ตามที่ไม่ได้ทำเครื่องหมายและทำเครื่องหมายตามต้องการเมื่อทำเครื่องหมายในช่อง

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

ฉันต้องทำบางอย่างเช่นนี้เพื่อแก้ไขข้อบกพร่องเนื่องจากฉันมีบางอย่างtype="number"กับmin="0.00000001":

HTML:

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

JS:

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

หากฉันไม่ตั้งค่าช่องอินพุตที่ซ่อนไว้ทั้งหมดเป็นnullchrome จะยังคงพยายามตรวจสอบอินพุต

ไม่มีการตรวจสอบความถูกต้องจะทำงานได้

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

ฉันมีปัญหานี้เมื่อฉันมี class = "hidden" ในช่องป้อนข้อมูลเนื่องจากฉันใช้ปุ่มแทนสัญลักษณ์แสดงหัวข้อย่อยวิทยุและเปลี่ยนสถานะ "ใช้งานอยู่" ผ่าน JS ..

ฉันเพิ่งเพิ่มส่วนฟิลด์อินพุตวิทยุพิเศษของกลุ่มเดียวกันที่ฉันต้องการให้ข้อความปรากฏ:

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

อีก 2 สัญลักษณ์แสดงหัวข้อย่อยที่ใช้งานอยู่จะมองไม่เห็นอันนี้ไม่ได้และสิ่งนี้จะทำให้เกิดข้อความตรวจสอบความถูกต้องและไม่มีข้อผิดพลาดของคอนโซล - บิตของการแฮ็ก แต่วันนี้ไม่ได้อะไร ..

ข้อผิดพลาดนี้ได้รับหากเพิ่มรูปแบบทศนิยม ฉันแค่เพิ่ม

step="0.1"

ฉันได้รับข้อความแสดงข้อผิดพลาดนี้เมื่อฉันป้อนหมายเลข (999999) ที่อยู่นอกช่วงที่ฉันตั้งค่าสำหรับแบบฟอร์ม

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

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

ไม่ได้ผลสำหรับฉันจนกว่าฉันจะใส่รหัส jQuery ทั้งหมดระหว่างนั้น:

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

แทนที่requiredด้วย required = "required"