Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus

Saya memiliki masalah akut di situs web saya. Di Google Chrome beberapa pelanggan tidak dapat melanjutkan ke halaman pembayaran saya. Saat mencoba mengirim formulir saya mendapatkan kesalahan ini:

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

Ini dari konsol JavaScript.

Saya membaca bahwa masalahnya mungkin karena bidang tersembunyi memiliki atribut yang diperlukan. Sekarang masalahnya adalah bahwa kita menggunakan .net form web diperlukan validator bidang, dan bukan atribut html5 yang diperlukan.

Tampaknya acak siapa yang mendapat kesalahan ini. Adakah yang tahu solusi untuk ini?

Masalah ini terjadi pada Chrome jika bidang formulir gagal validasi, tetapi karena kontrol yang tidak valid masing-masing tidak dapat difokus, upaya browser untuk menampilkan pesan "Silakan isi bidang ini" di sebelahnya juga gagal.

Kontrol formulir mungkin tidak dapat fokus saat validasi dipicu karena beberapa alasan. Dua skenario yang dijelaskan di bawah ini adalah penyebab paling menonjol:

• Bidang ini tidak relevan sesuai dengan konteks logika bisnis saat ini. Dalam skenario seperti itu, kontrol masing-masing harus dihapus dari DOM atau tidak boleh ditandai dengan requiredatribut pada saat itu.

• Validasi dini dapat terjadi karena pengguna menekan ENTER pada input. Atau pengguna mengklik tombol / kontrol input dalam bentuk yang belum mendefinisikan typeatribut kontrol dengan benar. Jika atribut tipe tombol tidak disetel ke button, Chrome (atau peramban lain dalam hal ini) melakukan validasi setiap kali tombol diklik karena submitmerupakan nilai default typeatribut tombol .

  Untuk mengatasi masalah tersebut, jika Anda memiliki tombol pada halaman Anda yang melakukan sesuatu yang lain selain menyerahkan atau ulang , selalu ingat untuk melakukan ini: <button type="button">.

Lihat juga https://stackoverflow.com/a/7264966/1356062

Menambahkan novalidateatribut ke formulir akan membantu:

<form name="myform" novalidate>

Di Anda form, Anda mungkin inputmemiliki requiredatribut tersembunyi :

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

Yang formtidak bisa fokus pada elemen-elemen itu, Anda harus menghapus requireddari semua input tersembunyi, atau menerapkan fungsi validasi dalam javascript untuk menangani mereka jika Anda benar-benar membutuhkan input tersembunyi.

Jika ada orang lain yang memiliki masalah ini, saya mengalami hal yang sama. Seperti yang dibahas dalam komentar, itu disebabkan oleh peramban yang berusaha memvalidasi bidang tersembunyi. Itu menemukan bidang kosong dalam bentuk dan mencoba untuk fokus pada mereka, tetapi karena mereka ditetapkandisplay:none; , itu tidak bisa. Karena itu kesalahannya.

Saya dapat menyelesaikannya dengan menggunakan sesuatu yang mirip dengan ini:

$("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.
});

Juga, ini mungkin merupakan duplikat dari "Kontrol formulir tidak valid" hanya di Google Chrome

Dalam kasus saya masalahnya adalah dengan input type="radio" requireddisembunyikan dengan:

visibility: hidden;

Pesan kesalahan ini juga akan ditampilkan jika tipe input yang diperlukan radioatau checkboxmemiliki display: none;properti CSS.

Jika Anda ingin membuat input radio / kotak centang khusus yang harus disembunyikan dari UI dan tetap mempertahankan requiredatributnya, Anda sebaiknya menggunakan:

opacity: 0; Properti CSS

Tidak ada jawaban sebelumnya yang berfungsi untuk saya, dan saya tidak memiliki bidang tersembunyi dengan required atribut.

Dalam kasus saya, masalah ini disebabkan dengan memiliki <form>dan kemudian <fieldset>sebagai anak pertama, yang memegang <input>dengan requiredatribut. Menghapus masalah yang <fieldset>diselesaikan. Atau Anda dapat membungkus formulir Anda dengannya; itu diizinkan oleh HTML5.

Saya menggunakan Windows 7 x64, Chrome versi 43.0.2357.130 m.

Namun kemungkinan lain jika Anda mendapatkan kesalahan pada input kotak centang. Jika kotak centang Anda menggunakan CSS khusus yang menyembunyikan default dan menggantinya dengan gaya lain, ini juga akan memicu kesalahan yang tidak dapat fokus di Chrome pada kesalahan validasi.

Saya menemukan ini di stylesheet saya:

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

Perbaikan sederhana adalah untuk menggantinya dengan ini:

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

Bisa jadi Anda telah menyembunyikan (menampilkan: tidak ada) bidang dengan atribut yang diperlukan .

Silakan periksa semua bidang yang diperlukan terlihat oleh pengguna :)

Bagi saya ini terjadi, ketika ada <select>bidang dengan opsi yang dipilih sebelumnya dengan nilai '':

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

Sayangnya itu satu-satunya solusi lintas-browser untuk placeholder ( Bagaimana cara membuat placeholder untuk kotak 'pilih'? ).

Masalahnya muncul di Chrome 43.0.2357.124.

Jika Anda memiliki bidang apa pun dengan atribut yang diperlukan yang tidak terlihat selama pengiriman formulir, kesalahan ini akan terjadi. Anda cukup menghapus atribut yang diperlukan saat Anda mencoba menyembunyikan bidang itu. Anda dapat menambahkan atribut yang diperlukan jika Anda ingin menampilkan bidang lagi. Dengan cara ini, validasi Anda tidak akan terganggu dan pada saat yang sama, kesalahan tidak akan dibuang.

Untuk masalah Select2 Jquery

Masalahnya adalah karena validasi HTML5 tidak dapat memfokuskan elemen tidak valid tersembunyi. Saya menemukan masalah ini ketika saya berurusan dengan plugin jQuery Select2.

Solusi Anda bisa menyuntikkan pendengar acara dan acara 'tidak valid' dari setiap elemen formulir sehingga Anda dapat memanipulasi sesaat sebelum HTML5 memvalidasi acara.

$('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);          
});

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>

Ya .. Jika kontrol formulir tersembunyi memiliki bidang wajib maka itu menunjukkan kesalahan ini. Salah satu solusinya adalah dengan menonaktifkan kontrol formulir ini . Ini karena biasanya jika Anda menyembunyikan kontrol bentuk itu karena Anda tidak peduli dengan nilainya. Jadi formulir ini mengontrol pasangan nilai nama tidak akan dikirim saat mengirimkan formulir.

Anda dapat mencoba .removeAttribute("required")elemen-elemen yang tersembunyi pada saat memuat jendela. karena sangat mungkin bahwa elemen yang bersangkutan ditandai disembunyikan karena javascript (bentuk tab)

misalnya

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

Ini harus melakukan tugas.

Itu berhasil untuk saya ... tepuk tangan

Kemungkinan penyebab lain dan tidak tercakup dalam semua jawaban sebelumnya ketika Anda memiliki formulir normal dengan bidang yang diperlukan dan Anda mengirimkan formulir lalu menyembunyikannya langsung setelah pengiriman (dengan javascript) tidak memberikan waktu untuk fungsi validasi berfungsi.

Fungsionalitas validasi akan mencoba untuk fokus pada bidang yang diperlukan dan menampilkan pesan validasi kesalahan tetapi bidang tersebut telah disembunyikan, jadi "Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus." muncul!

Edit:

Untuk menangani kasus ini cukup tambahkan kondisi berikut di dalam handler kirim Anda

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

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

    // Submit and hide form safely
  }

Edit: Penjelasan

Andaikata Anda menyembunyikan formulir pada saat pengiriman, kode ini menjamin bahwa formulir / bidang tidak akan disembunyikan sampai formulir menjadi valid. Jadi, jika bidang tidak valid, peramban dapat fokus padanya tanpa masalah karena bidang ini masih ditampilkan.

Ada hal-hal yang masih mengejutkan saya ... Saya memiliki bentuk dengan perilaku dinamis untuk dua entitas yang berbeda. Satu entitas memerlukan beberapa bidang yang tidak lainnya. Jadi, kode JS saya, tergantung pada entitas, melakukan sesuatu seperti: $ ('# periodo'). RemoveAttr ('wajib'); $ ("# periodo-container"). hide ();

dan ketika pengguna memilih entitas lain: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('wajib', true);

Tetapi kadang-kadang, ketika formulir dikirimkan, masalah muncul: "Kontrol formulir yang tidak valid dengan nama = periodo '' tidak dapat fokus (saya menggunakan nilai yang sama untuk id dan nama).

Untuk memperbaiki masalah ini, Anda harus memastikan bahwa input tempat Anda mengatur atau menghapus 'wajib' selalu terlihat.

Jadi, yang saya lakukan adalah:

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

Thats memecahkan masalah saya ... luar biasa.

Dalam hal ini..

ng-showsedang digunakan.
ng-ifdimasukkan ke tempatnya dan memperbaiki kesalahan saya.

Untuk penggunaan sudut:

ng-diperlukan = "boolean"

Ini hanya akan menerapkan atribut 'wajib' html5 jika nilainya benar.

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

Saya datang ke sini untuk menjawab bahwa saya telah memicu masalah ini sendiri berdasarkan TIDAK menutup </form> tag DAN memiliki beberapa bentuk pada halaman yang sama. Formulir pertama akan diperluas untuk mencakup mencari validasi pada input formulir dari tempat lain. Karena formulir MEREKA disembunyikan, mereka memicu kesalahan.

jadi misalnya:

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

Pemicu

Kontrol formulir yang tidak valid dengan name = 'userId' tidak bisa fokus.

Kontrol formulir yang tidak valid dengan nama = 'kata sandi' tidak dapat fokus.

Kontrol formulir yang tidak valid dengan nama = 'konfirmasi' tidak dapat fokus.

Ada banyak cara untuk memperbaikinya

1. Tambahkan novalidate ke form Anda tetapi itu benar-benar salah karena akan menghapus validasi form yang akan menyebabkan informasi yang dimasukkan oleh pengguna salah.

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

2. Gunakan dapat menghapus atribut yang diperlukan dari bidang yang diperlukan yang juga salah karena akan menghapus validasi formulir sekali lagi.

   Alih-alih ini:

<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. Gunakan dapat menonaktifkan bidang yang diperlukan ketika Anda tidak akan mengirimkan formulir alih-alih melakukan beberapa opsi lain. Ini adalah solusi yang disarankan menurut saya.

   Suka:

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

atau menonaktifkannya melalui kode javascript / jquery tergantung pada skenario Anda.

Saya menemukan masalah yang sama ketika menggunakan Angular JS. Itu disebabkan dari penggunaan yang diperlukan bersama dengan ng-hide . Ketika saya mengklik tombol kirim ketika elemen ini disembunyikan maka terjadilah kesalahan Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus.akhirnya!

Misalnya menggunakan ng-hide bersamaan dengan yang dibutuhkan:

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

Saya menyelesaikannya dengan mengganti yang dibutuhkan dengan ng-pattern saja.

Sebagai contoh solusinya:

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

Untuk pengguna AngularJS 1.x lain di luar sana, kesalahan ini muncul karena saya menyembunyikan kontrol formulir dari tampilan alih-alih menghapusnya dari DOM sepenuhnya ketika saya tidak membutuhkan kontrol untuk diselesaikan.

Saya memperbaikinya dengan menggunakan ng-ifbukan ng-show/ng-hide pada div yang berisi kontrol formulir yang memerlukan validasi.

Semoga ini bisa membantu Anda sesama pengguna case edge.

Biarkan saya menyatakan kasus saya karena berbeda dari semua solusi di atas. Saya memiliki tag html yang tidak ditutup dengan benar. elemen itu tidak required , tapi itu tertanam dalam hiddendiv

masalah dalam kasus saya adalah dengan type="datetime-local", yang - untuk beberapa alasan - divalidasi pada pengiriman formulir.

saya mengubah ini

<input type="datetime-local" />

ke dalam itu

<input type="text" />

Saya ingin menjawab di sini karena TIDAK ada jawaban ini, atau hasil Google lainnya yang menyelesaikan masalah bagi saya.

Bagi saya itu tidak ada hubungannya dengan fieldset atau input tersembunyi.

Saya menemukan bahwa jika saya menggunakan max="5"(misalnya) itu akan menghasilkan kesalahan ini. Jika saya menggunakan maxlength="5" ... tidak ada kesalahan.

Saya dapat mereproduksi kesalahan dan menghapus kesalahan beberapa kali.

Saya masih tidak tahu mengapa menggunakan kode itu menghasilkan kesalahan, sejauh ini menyatakan itu harus valid, bahkan tanpa "min" saya percaya.

Atau jawaban lain dan sangat mudah adalah dengan menggunakan atribut Placeholder HTML5 maka tidak perlu menggunakan validasi js.

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

Chrome tidak akan dapat menemukan elemen kosong, tersembunyi, dan diperlukan untuk fokus. Solusi Sederhana.

Semoga itu bisa membantu. Saya benar-benar disortir dengan solusi ini.

Saya datang ke sini dengan masalah yang sama. Bagi saya (menyuntikkan elemen tersembunyi sesuai kebutuhan - yaitu pendidikan dalam aplikasi pekerjaan) memiliki bendera yang diperlukan.

Apa yang saya sadari adalah bahwa validator menembaki yang disuntik lebih cepat daripada dokumen siap, sehingga mengeluh.

Tag wajib-asli saya menggunakan tag visibilitas (vm.flags.hasHighSchool).

Saya menyelesaikannya dengan membuat bendera khusus untuk mengatur ng-diperlukan = "vm.flags.highSchoolRequired == true"

Saya menambahkan callback 10ms pada pengaturan bendera itu dan masalahnya diselesaikan.

 vm.hasHighSchool = function (attended) {

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

Html:

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

Pastikan bahwa semua kontrol di formulir Anda dengan atribut yang diperlukan juga memiliki set atribut nama

Kesalahan ini terjadi pada saya karena saya mengirimkan formulir dengan bidang wajib yang tidak diisi.

Kesalahan ini dihasilkan karena browser mencoba fokus pada bidang yang diperlukan untuk memperingatkan pengguna bahwa bidang tersebut diperlukan tetapi bidang yang diperlukan disembunyikan di layar tanpa div sehingga peramban tidak dapat fokus pada bidang tersebut. Saya mengirimkan dari tab yang terlihat dan bidang yang diperlukan ada di tab yang tersembunyi, karenanya kesalahan.

Untuk memperbaikinya, pastikan Anda mengontrol kolom yang wajib diisi.

Itu karena ada input tersembunyi dengan atribut yang diperlukan dalam formulir.

Dalam kasus saya, saya memiliki kotak pilih dan disembunyikan oleh tokenizer jquery menggunakan gaya inline. Jika saya tidak memilih token apa pun, browser melempar kesalahan di atas pada pengiriman formulir.

Jadi, saya memperbaikinya menggunakan teknik css di bawah ini:

  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;

 }

Saya menerima kesalahan yang sama ketika mengkloning elemen HTML untuk digunakan dalam formulir.

(Saya memiliki sebagian formulir yang lengkap, yang memiliki template yang disuntikkan ke dalamnya, dan kemudian template tersebut dimodifikasi)

Kesalahan merujuk pada bidang asli, dan bukan versi kloning.

Saya tidak dapat menemukan metode apa pun yang akan memaksa formulir untuk mengevaluasi kembali sendiri (dengan harapan itu akan menghilangkan referensi ke bidang lama yang sekarang tidak ada) sebelum menjalankan validasi.

Untuk mengatasi masalah ini, saya menghapus atribut yang diperlukan dari elemen asli dan menambahkannya secara dinamis ke bidang kloning sebelum menyuntikkannya ke dalam formulir. Formulir sekarang memvalidasi bidang yang dikloning dan dimodifikasi dengan benar.