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?
html
validation
mp1990
sumber
sumber
Jawaban:
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
required
atribut pada saat itu.Validasi dini dapat terjadi karena pengguna menekan ENTER pada input. Atau pengguna mengklik tombol / kontrol input dalam bentuk yang belum mendefinisikan
type
atribut kontrol dengan benar. Jika atribut tipe tombol tidak disetel kebutton
, Chrome (atau peramban lain dalam hal ini) melakukan validasi setiap kali tombol diklik karenasubmit
merupakan nilai defaulttype
atribut 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
sumber
required
atau menambahnovalidate
tidak pernah merupakan solusi yang baik.number
bidang tersembunyi di mana nilai default tidak dapat dibagi secara merata oleh ukuran langkah. Mengubah ukuran langkah memecahkan masalah.Menambahkan
novalidate
atribut ke formulir akan membantu:sumber
<fieldset>
Di Anda
form
, Anda mungkininput
memilikirequired
atribut tersembunyi :<input type="hidden" required />
<input type="file" required style="display: none;"/>
Yang
form
tidak bisa fokus pada elemen-elemen itu, Anda harus menghapusrequired
dari semua input tersembunyi, atau menerapkan fungsi validasi dalam javascript untuk menangani mereka jika Anda benar-benar membutuhkan input tersembunyi.sumber
required
.pattern
sendiri dapat menyebabkan masalah ini.<input type="hidden" required />
dan yang lain dengan<input type="text" style="display: none" required />
, dan satu-satunya yang menampilkan kesalahan di Chrome adalahdisplay: none
, sedangkan yang"hidden"
satu mengirimkan baik-baik saja.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 ditetapkan
display:none;
, itu tidak bisa. Karena itu kesalahannya.Saya dapat menyelesaikannya dengan menggunakan sesuatu yang mirip dengan ini:
Juga, ini mungkin merupakan duplikat dari "Kontrol formulir tidak valid" hanya di Google Chrome
sumber
Dalam kasus saya masalahnya adalah dengan
input type="radio" required
disembunyikan dengan:visibility: hidden;
Pesan kesalahan ini juga akan ditampilkan jika tipe input yang diperlukan
radio
ataucheckbox
memilikidisplay: none;
properti CSS.Jika Anda ingin membuat input radio / kotak centang khusus yang harus disembunyikan dari UI dan tetap mempertahankan
required
atributnya, Anda sebaiknya menggunakan:opacity: 0;
Properti CSSsumber
name=""
bukan yang asli?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>
denganrequired
atribut. 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.
sumber
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:
Perbaikan sederhana adalah untuk menggantinya dengan ini:
sumber
Bisa jadi Anda telah menyembunyikan (menampilkan: tidak ada) bidang dengan atribut yang diperlukan .
Silakan periksa semua bidang yang diperlukan terlihat oleh pengguna :)
sumber
Bagi saya ini terjadi, ketika ada
<select>
bidang dengan opsi yang dipilih sebelumnya dengan nilai '':Sayangnya itu satu-satunya solusi lintas-browser untuk placeholder ( Bagaimana cara membuat placeholder untuk kotak 'pilih'? ).
Masalahnya muncul di Chrome 43.0.2357.124.
sumber
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.
sumber
$("input").attr("required", "true");
atau$("input").prop('required',true);
sebaliknya Anda bisaremove
dengan atribut / properti . >> jQuery menambahkan yang diperlukan untuk memasukkan bidangUntuk 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.
sumber
Ini akan menunjukkan pesan itu jika Anda memiliki kode seperti ini:
sumber
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.
sumber
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
Ini harus melakukan tugas.
Itu berhasil untuk saya ... tepuk tangan
sumber
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
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.
sumber
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:
Thats memecahkan masalah saya ... luar biasa.
sumber
Dalam hal ini..
ng-show
sedang digunakan.ng-if
dimasukkan ke tempatnya dan memperbaiki kesalahan saya.sumber
Untuk penggunaan sudut:
ng-diperlukan = "boolean"
Ini hanya akan menerapkan atribut 'wajib' html5 jika nilainya benar.
sumber
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:
Pemicu
sumber
Ada banyak cara untuk memperbaikinya
<form action="...." class="payment-details" method="post" novalidate>
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">
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">
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.
sumber
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:
Saya menyelesaikannya dengan mengganti yang dibutuhkan dengan ng-pattern saja.
Sebagai contoh solusinya:
sumber
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-if
bukanng-show
/ng-hide
pada div yang berisi kontrol formulir yang memerlukan validasi.Semoga ini bisa membantu Anda sesama pengguna case edge.
sumber
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 dalamhidden
divmasalah dalam kasus saya adalah dengan
type="datetime-local"
, yang - untuk beberapa alasan - divalidasi pada pengiriman formulir.saya mengubah ini
ke dalam itu
sumber
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 menggunakanmaxlength="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.
sumber
min='-9999999999.99' max='9999999999.99'
.Atau jawaban lain dan sangat mudah adalah dengan menggunakan atribut Placeholder HTML5 maka tidak perlu menggunakan validasi js.
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.
sumber
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.
Html:
sumber
Pastikan bahwa semua kontrol di formulir Anda dengan atribut yang diperlukan juga memiliki set atribut nama
sumber
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.
sumber
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:
sumber
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.
sumber