Bagaimana Anda menunjukkan kesalahan validasi dalam html?

Pilihan untuk menggunakan HTML murni, terkadang dengan sentuhan CSS, untuk melengkapi validasi formulir JavaScript hingga saat ini tidak terpikirkan. Tentu ada semua jenis plug-in konyol selama bertahun-tahun yang ditujukan untuk mencapai hal ini, tetapi tidak pernah ada satu standar pun yang dapat kami upayakan.

Untuk pengantar yang lebih mendetail tentang validasi formulir HTML5, Anda dapat menemukan beberapa artikel bagus yang ditautkan di bawah. Pada artikel ini kami bermaksud menyajikan hanya sejumlah contoh sederhana untuk Anda mulai, yang mencakup elemen bentuk dasar

Sebelum Anda bertanya, dan seseorang selalu melakukannya, contoh-contoh ini saat ini akan berfungsi di browser berikut. Safari 5, Chrome 6, Opera 9, Firefox 4 Beta dan iPhone/iPad. Juga setiap browser memiliki perilaku default yang sedikit berbeda

Atribut 'wajib'

Perubahan paling sederhana yang dapat Anda lakukan pada formulir Anda adalah menandai kolom input teks sebagai 'wajib'

Ini memberi tahu browser web (mengetahui HTML5) bahwa bidang tersebut harus dianggap wajib. Peramban yang berbeda dapat menandai kotak masukan dengan cara tertentu (Firefox 4 Beta menambahkan bayangan kotak merah secara default), menampilkan peringatan (Opera) atau bahkan mencegah formulir dikirimkan jika bidang ini tidak memiliki nilai. Semoga perilaku ini akan menyatu di rilis mendatang

Untuk contoh ini, kami telah membuat pemformatan CSS valid/tidak valid kami sendiri untuk menggantikan default browser. . Itu sebabnya Anda mungkin melihat sesuatu seperti berikut ini

Sebelum Anda mengetik apa pun ke dalam kotak, penanda merah ditampilkan. Segera setelah satu karakter dimasukkan, ini berubah menjadi penanda hijau untuk menunjukkan bahwa inputnya 'valid'

Dengan menggunakan CSS, Anda dapat menempatkan penanda di dalam atau di samping kotak input, atau cukup gunakan warna latar dan batas seperti yang dilakukan beberapa browser secara default

Atribut wajib juga dapat diterapkan ke kotak centang yang telah kami bahas secara terpisah

Jenis INPUT teks baru

Di sinilah HTML5 benar-benar menarik dan lebih bermanfaat. Seiring dengan jenis input teks, sekarang ada sejumlah opsi lain, termasuk email, url, nomor, telp, tanggal, dan banyak lainnya.

Di iPhone/iPad, jenis masukan yang berbeda diasosiasikan dengan keyboard yang berbeda, sehingga memudahkan orang untuk melengkapi formulir online Anda. Di browser web lain, mereka dapat digunakan dalam kombinasi dengan atribut yang diperlukan untuk membatasi atau memberikan saran tentang nilai masukan yang diperbolehkan

Jenis INPUT = "email"

Dengan mengubah jenis input ke email sekaligus menggunakan atribut yang diperlukan, browser dapat digunakan untuk memvalidasi (secara terbatas) alamat email

Perhatikan bahwa untuk contoh ini kami telah menggunakan placeholder atribut HTML5 lain yang memungkinkan kami menampilkan prompt atau instruksi di dalam bidang - sesuatu yang sebelumnya harus diterapkan menggunakan acara JavaScript onfocus dan onblur yang berantakan

Kode di atas menampilkan kotak input sebagai berikut

Sekali lagi, browser yang berbeda mengimplementasikannya secara berbeda. Di Opera cukup memasukkan *@* saja agar input diterima. Di Safari, Chrome, dan Firefox Anda harus memasukkan setidaknya *@-. -. Jelas tidak ada contoh yang sangat membatasi, tetapi ini akan mencegah orang memasukkan nilai yang salah, seperti nomor telepon, string dengan banyak '@' atau spasi

Inilah tampilannya di Safari (dengan pemformatan CSS kami untuk menunjukkan status (dalam) valid)

Jenis INPUT = "url"

Dengan cara yang mirip dengan jenis input email di atas, yang satu ini dirancang untuk hanya menerima URL yang diformat dengan benar. Tentu saja saat ini tidak melakukan hal semacam itu, tetapi nanti Anda akan melihat cara meningkatkan perilakunya menggunakan atribut pola

Sekali lagi, kotak input muncul seperti biasa

Kali ini persyaratan minimum untuk sebagian besar browser adalah satu atau lebih huruf yang diikuti dengan titik dua. Sekali lagi, tidak terlalu membantu, tetapi itu akan menghentikan orang yang mencoba memasukkan alamat email mereka atau omong kosong lainnya

Seperti disebutkan di atas, kita dapat memperbaikinya dengan memanfaatkan atribut pola yang menerima ekspresi reguler JavaScript. Sehingga kode di atas menjadi

Sekarang kotak input kami hanya akan menerima teks yang dimulai dengan http. // atau https. // dan setidaknya satu karakter tambahan

Jika Anda belum terbiasa dengan ekspresi reguler, Anda harus menjadikannya prioritas untuk dipelajari. Bagi yang sudah familiar, perhatikan bahwa ^ dan $ sudah tersirat sehingga input harus cocok dengan seluruh ekspresi. Pengubah pola

Jika ada yang ingin menyumbangkan ekspresi yang lebih menyeluruh untuk menguji format email atau url yang valid, jangan ragu untuk mempostingnya menggunakan opsi Umpan Balik di atas

INPUT ketik = "angka" dan ketik = "rentang"

Jenis input angka dan rentang juga menerima parameter untuk min, maks, dan langkah. Dalam kebanyakan kasus, Anda dapat mengabaikan langkah karena standarnya adalah 1

Di sini Anda melihat contoh termasuk input angka, biasanya ditampilkan sebagai 'roller' dan input rentang ditampilkan sebagai 'slider'

Seperti jenis input HTML5 lainnya, browser yang tidak mengenali opsi baru akan menggunakan input teks sederhana secara default. Oleh karena itu, sebaiknya sertakan ukuran untuk kotak masukan

Opsi penggeser agak aneh karena tidak ada nilai yang ditampilkan, tetapi mungkin berguna untuk lebih banyak input 'analog'. Ada beberapa bug dengan input nomor di mana jika Anda tidak menetapkan nilai maksimal, mengklik 'turun' dengan input kosong akan menghasilkan angka yang sangat besar

Inilah cara kedua input ditampilkan di Safari

dan di Opera

Mereka saat ini tidak didukung di Firefox 4 Beta

Jika Anda ingin membatasi input bidang teks ke angka tanpa panah atas/bawah yang terkait dengan kotak input, Anda selalu dapat menyetel jenis input ke teks dan menggunakan pola "\d+" (satu atau lebih angka

Jenis INPUT = "kata sandi"

Kami memiliki artikel terpisah dengan detail tentang memvalidasi kata sandi menggunakan HTML5, termasuk kode JavaScript untuk menyesuaikan pesan peringatan yang dihasilkan browser

Jenis INPUT HTML5 lainnya

Jenis input HTML5 lainnya termasuk

• warna
• tanggal
• tanggal Waktu
• datetime-local
• bulan
• Cari
• tel
• waktu
• pekan

Input pencarian akan, di beberapa browser, mengubah gaya agar sesuai dengan browser atau format kolom pencarian default sistem operasi. Anda dapat melihat ini ditunjukkan di input Pencarian di atas

Jenis input tel berguna untuk iPhone karena memilih keyboard input yang berbeda. Tidak ada pencocokan pola yang ditetapkan secara default sehingga Anda harus mengimplementasikannya sendiri menggunakan atribut pattern untuk hanya menerima karakter tertentu

Input warna dimaksudkan agar Anda dapat memilih kode hex dari roda warna - atau yang serupa - tetapi tampaknya belum diterapkan di alam liar

Opsi terkait tanggal dan waktu lainnya memiliki efek setidaknya di Opera, dengan kalender pop-up dan perangkat lain muncul untuk membantu input. Meskipun akan menyenangkan melihat hal seperti ini di setiap browser, untuk saat ini Anda mungkin perlu tetap menggunakan plugin JavaScript yang ada di mana-mana

Menata input yang valid/tidak valid menggunakan CSS

Meskipun kode yang kami gunakan sedikit lebih rumit, ini akan membantu Anda memulai

Kumpulan gaya pertama dapat digunakan untuk menandai kotak input sebagai 'tidak valid', dengan menambahkan ikon, mewarnai teks atau batas, atau yang serupa. Ini akan berlaku untuk input yang diperlukan tetapi kosong, atau untuk input yang memiliki format/pola wajib yang belum terpenuhi

Gaya -moz-box-shadow ada hanya untuk mencegah Firefox 4 Beta menambahkan batas merah defaultnya

Untuk input yang diperlukan dan 'valid', Anda dapat menggunakan yang berikut ini

Beberapa artikel di bawah ini, terutama dua yang pertama, menyediakan opsi dan solusi gaya/skrip lain untuk mendukung browser lama

Contoh gaya menggunakan gambar dan sprite

Seperti yang ditunjukkan di atas, setelah Anda menambahkan atribut HTML5 ke elemen formulir, atribut tersebut dapat ditata dengan mudah menggunakan CSS sehingga setiap kolom input ditandai dengan jelas sebagai valid atau tidak valid

Di sini Anda dapat melihat gaya di atas diterapkan pada kolom input yang diperlukan

Solusi ini masih lebih rumit dari yang seharusnya karena memerlukan dua gambar tambahan untuk dimuat. Untungnya, kita dapat berasumsi bahwa semua browser yang mendukung teknik validasi formulir HTML5 juga akan mendukung gambar yang diganti di CSS dengan 'set data yang disandikan Base64'

Menggunakan layanan seperti Spritebaker atau teknik lainnya, pengaturan gaya di atas menjadi

Kode di atas sekarang dapat disalin langsung ke style sheet CSS Anda. Tidak perlu menyalin gambar apa pun dan, terutama jika style-sheet Anda dikompres dengan gzip, tidak akan ada dampak pada waktu muat. Dalam beberapa menit Anda dapat memperbarui seluruh situs web Anda

Untuk browser yang rusak, ini adalah bagaimana kolom input yang diperlukan akan muncul di Safari dengan gambar atau latar belakang Data URI

Penataan gaya yang sama dapat diperluas ke elemen textarea, tetapi tidak akan berfungsi untuk kotak centang, elemen pilih, dll. Untuk itu, Anda mungkin ingin menempatkan penanda yang valid/tidak valid di samping elemen atau memformat elemen input itu sendiri menggunakan batas, warna latar belakang, dll.

Fallback untuk atribut placeholder

JavaScript berikut, ditempatkan atau disertakan di akhir halaman, harus mengaktifkan dukungan untuk atribut placeholder di bidang INPUT setidaknya untuk Internet Explorer 8+, Firefox, dan Opera

Bagaimana cara menampilkan kesalahan validasi formulir?

Bagaimana Anda menunjukkan validasi dalam HTML?

Bagaimana Anda membuat pesan kesalahan dalam HTML?

Bagaimana cara mengatur kesalahan dalam validasi?