Masalah dan solusi yang dihadapi dalam menggunakan input yang diperlukan html5

Kesalahan dalam menyembunyikan masukan saat mengirimkan formulir

Saat formulir dikirimkan, beberapa tag masukan disembunyikan, dan kesalahan An invalid form control with name='' is not focusable akan muncul selama proses verifikasi formulir.

Walaupun masalah yang saya temui adalah tag masukan saya tidak memiliki atribut yang diperlukan sama sekali, tetapi sebelum tag disembunyikan (saya menggunakan bilah tab untuk beralih) saya salah memasukkan format lalu menyembunyikannya, kali ini sebenarnya salah. Itu juga akan diverifikasi oleh formulir, tetapi karena tersembunyi, browser akan melaporkan kesalahan jika tidak bisa mendapatkan fokus.

Cukup atur nilai input menjadi kosong sebelum menyembunyikannya.

Kesalahan ini juga akan terjadi jika input berisi atribut display:none dan diperlukan.

Chrome ingin fokus pada kontrol-kontrol yang dibutuhkan namun masih kosong sehingga muncul pesan Please fill pada kolom ini. Namun, jika kontrol disembunyikan saat Chrome ingin memunculkan pesan, yaitu saat formulir dikirimkan, Chrome tidak dapat fokus pada kontrol tersebut karena disembunyikan, sehingga formulir tidak dapat dikirimkan.

1. Saat bersembunyi, hapus atribut yang diperlukan

 selector.removeAttribute (wajib)

2. Jika diperlukan tidak digunakan, mungkin disebabkan oleh jenis tombol yang tidak disetel. Setel <button type=button>

3. Formulir tidak terverifikasi, yaitu ditambahkan atribut novalidate. (Bukan solusi akhir ）<form novalidate></form>

4. Karena disebabkan oleh penggunaan display:none, maka visibilitas: tersembunyi yang sama juga akan menimbulkan masalah, jadi jangan digunakan. Anda dapat mengatur opacity gaya css: 0;

5. Nonaktifkan kontrol formulir ini. dinonaktifkan Ini karena biasanya jika Anda menyembunyikan kontrol formulir, itu karena Anda tidak peduli dengan nilainya. Jadi pasangan nilai nama kontrol formulir ini tidak akan dikirim saat formulir dikirimkan.

 $(body).on(submit, .myForm, function(evt) {// Nonaktifkan hal-hal yang tidak ingin kita validasi.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// Jika Validasi HTML5 tersedia, biarkan berjalan. Jika tidak, cegah default.if (this.el.checkValidity && !this.el.checkValidity()) { // Aktifkan kembali hal-hal yang sebelumnya kita nonaktifkan. $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false); return true;}evt.preventDefault();// Aktifkan kembali hal-hal itu kami sebelumnya menonaktifkan.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// Apa pun pemrosesan formulir lainnya yang ada di sini.});

Di atas adalah masalah dan solusi yang dihadapi dalam penggunaan input wajib h5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!