"Kontrol formulir tidak valid" hanya di Google Chrome

Kode di bawah ini berfungsi dengan baik di Safari tetapi di Chrome dan Firefox formulir tidak akan dikirim. Konsol Chrome mencatat kesalahan tersebut An invalid form control with name='' is not focusable. Ada ide?

Perhatikan bahwa meskipun kontrol di bawah tidak memiliki nama, kontrol tersebut harus memiliki nama pada saat pengiriman, diisi oleh Javascript di bawah. Formulir TIDAK berfungsi di 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 ingin fokus pada kontrol yang diperlukan namun masih kosong sehingga dapat memunculkan pesan 'Harap isi kolom ini'. Namun, jika kontrol disembunyikan pada saat Chrome ingin memunculkan pesan, yaitu pada saat pengiriman formulir, Chrome tidak dapat fokus pada kontrol karena tersembunyi, sehingga formulir tidak dapat dikirim.

Jadi, untuk mengatasi masalah tersebut, ketika sebuah kontrol disembunyikan oleh javascript, kita juga harus menghapus atribut 'required' dari kontrol itu.

Ini akan menunjukkan pesan itu jika Anda memiliki kode seperti ini:

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

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

solusi untuk masalah ini akan tergantung pada bagaimana situs tersebut harus bekerja

misalnya jika Anda tidak ingin formulir dikirim kecuali bidang ini diperlukan, Anda harus menonaktifkan tombol kirim

jadi kode js untuk menampilkan div harus mengaktifkan tombol kirim juga

Anda juga dapat menyembunyikan tombol (harus dinonaktifkan dan disembunyikan karena jika disembunyikan tetapi tidak dinonaktifkan pengguna dapat mengirimkan formulir dengan cara lain seperti tekan enterdi bidang lain tetapi jika tombol dinonaktifkan, ini tidak akan terjadi)

jika Anda ingin formulir dikirim jika div tersembunyi, Anda harus menonaktifkan masukan yang diperlukan di dalamnya dan mengaktifkan masukan saat Anda menampilkan div

jika seseorang membutuhkan kode untuk melakukannya, Anda harus memberi tahu saya apa yang Anda butuhkan

Jika Anda tidak peduli dengan validasi HTML5 (mungkin Anda memvalidasi di JS atau di server), Anda dapat mencoba menambahkan "novalidate" ke formulir atau elemen masukan.

coba gunakan tag yang tepat untuk kontrol HTML5 Seperti untuk Angka (bilangan bulat)

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

untuk Desimal atau float

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

step = 'Any' Tanpa ini, Anda tidak dapat mengirimkan formulir Anda dengan memasukkan nilai desimal atau float seperti 3.5 atau 4.6 di bidang di atas.

Coba perbaiki pola, ketikkan kontrol HTML5 untuk memperbaiki masalah ini.

Saya mendapatkan kesalahan ini, dan memutuskan bahwa itu sebenarnya di bidang yang tidak disembunyikan.

Dalam hal ini, itu adalah type="number"bidang, yang wajib diisi. Jika tidak ada nilai yang pernah dimasukkan ke bidang ini, pesan kesalahan ditampilkan di konsol, dan formulir tidak dikirimkan. Memasukkan nilai, dan kemudian menghapusnya berarti kesalahan validasi ditampilkan seperti yang diharapkan.

Saya yakin ini adalah bug di Chrome: solusi saya untuk saat ini adalah menghasilkan nilai awal / default.

Saya mengalami kesalahan:

Kontrol bentuk yang tidak valid dengan name = 'telefono' tidak dapat difokuskan.

Ini terjadi karena saya tidak menggunakan bidang wajib dengan benar, yang diaktifkan dan dinonaktifkan saat mengklik kotak centang. Solusinya adalah menghapus requiredatribut setiap kali kotak centang tidak ditandai dan menandainya sebagai diperlukan saat kotak centang ditandai.

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

Saya harus melakukan sesuatu seperti ini untuk memperbaiki bug, karena saya punya beberapa type="number"dengan 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);
});

Jika saya tidak menyetel semua bidang masukan tersembunyi ke nullchrome akan tetap mencoba memvalidasi masukan.

Tidak ada validasi yang akan melakukan pekerjaan itu.

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

Saya mengalami masalah ini ketika saya memiliki class = "hidden" pada kolom input karena saya menggunakan tombol alih-alih peluru radio - dan mengubah status "aktif" melalui JS ..

Saya hanya menambahkan bagian bidang input radio tambahan dari grup yang sama tempat saya ingin pesan muncul:

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

2 peluru aktif lainnya tidak terlihat, yang satu ini tidak dan ini memicu pesan validasi dan tidak ada kesalahan konsol - sedikit peretasan tetapi apa yang tidak sekarang ini ..

kesalahan ini dapatkan jika menambahkan format desimal. saya hanya menambahkan

step="0.1"

Saya mendapat pesan kesalahan ini ketika saya memasukkan nomor (999999) yang berada di luar kisaran yang saya tetapkan untuk formulir.

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

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

tidak berfungsi untuk saya sampai saya memasukkan semua kode jQuery saya di antara itu:

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

ganti requireddengan wajib = "wajib"