Intro Into HTML5 Constraint Validation

Situs web dan aplikasi interaktif tidak dapat dibayangkan tanpa formulir yang memungkinkan kami untuk melakukannya terhubung dengan pengguna kami, dan untuk dapatkan data kita perlu untuk mengamankan kelancaran transaksi dengan mereka. Kami memang butuh input pengguna yang valid, namun kita perlu mendapatkannya dengan cara itu tidak membuat frustrasi pengguna kami terlalu banyak.

Meskipun kami dapat meningkatkan kegunaan formulir kami dengan pola desain UX yang dipilih dengan cerdas, HTML5 juga memiliki mekanisme asli untuk validasi kendala yang memungkinkan kami untuk tangkap kesalahan input tepat di front-end.

Dalam posting ini, kita akan fokus validasi kendala yang disediakan browser, dan melihat bagaimana pengembang frontend bisa mengamankan input pengguna yang valid menggunakan HTML5.

Mengapa Kami Membutuhkan Validasi Input Front-End

Validasi input memiliki dua tujuan utama. Konten yang kami dapatkan harus:

1. Berguna

Kita butuh data yang dapat digunakan yang dapat kami kerjakan. Kita perlu membuat orang masuk data realistis dalam format yang tepat. Misalnya, tidak ada orang yang hidup hari ini yang lahir 200 tahun yang lalu. Mendapatkan data seperti ini mungkin tampak lucu pada awalnya, tetapi dalam jangka panjang itu menyebalkan, dan mengisi basis data kami dengan data yang tidak berguna.

2. Aman

Ketika mengacu pada keamanan, ini berarti kita perlu mencegah injeksi konten berbahaya - baik disengaja atau tidak sengaja.

Kegunaan (mendapatkan data yang masuk akal) dapat dicapai hanya di sisi klien, tim backend tidak bisa membantu terlalu banyak dengan ini. Untuk mendapatkan keamanan, pengembang depan dan belakang harus bekerja bersama.

Jika pengembang frontend benar memvalidasi input di sisi klien, tim backend harus berurusan dengan jauh lebih sedikit kerentanan. Peretasan (sebuah situs) sering kali mengharuskan mengirimkan data tambahan, atau data dalam format yang salah. Pengembang dapat memerangi lubang keamanan seperti ini, berhasil bertarung dari front-end.

Misalnya, panduan keamanan PHP ini merekomendasikan untuk memeriksa semua yang kami bisa di sisi klien. Mereka menekankan pentingnya validasi input frontend dengan memberikan banyak contoh, seperti:

"Validasi input berfungsi paling baik dengan nilai yang sangat terbatas, mis. Ketika sesuatu harus berupa integer, atau string alfanumerik, atau URL HTTP."

Dalam validasi input frontend, tugas kita adalah memaksakan kendala yang masuk akal pada input pengguna. Fitur validasi kendala HTML5 memberi kami sarana untuk melakukannya.

HTML5 Batasan Validasi

Sebelum HTML5, pengembang frontend terbatas pada memvalidasi input pengguna dengan JavaScript, yang merupakan proses yang membosankan dan rentan kesalahan. Untuk meningkatkan validasi formulir sisi klien, HTML5 telah memperkenalkan a validasi kendala algoritma yang berjalan di browser modern, dan memeriksa validitas input yang dikirimkan.

Untuk melakukan evaluasi, algoritma menggunakan atribut yang berhubungan dengan validasi elemen input, seperti , </code>, dan <code><select></code>. Jika Anda ingin tahu bagaimana validasi kendala terjadi langkah demi langkah di peramban, periksa dokumen WhatWG ini.</p> <p>Berkat fitur validasi kendala HTML5, kami dapat menjalankan semuanya <strong>tugas validasi input standar</strong> di sisi klien <strong>tanpa JavaScript, hanya dengan HTML5</strong>.</p> <p>Untuk melakukan tugas yang berhubungan dengan validasi yang lebih kompleks, HTML5 memberi kita <strong>Constraint Validation JavaScript API</strong> kita dapat menggunakan untuk mengatur skrip validasi khusus kami.</p> <h4>Validasi dengan Jenis Input Semantik</h4> <p>HTML5 telah diperkenalkan <strong>tipe input semantik</strong> yang - selain menunjukkan makna elemen untuk agen pengguna - juga dapat digunakan untuk itu <strong>memvalidasi input pengguna</strong> dengan membatasi pengguna ke format input tertentu.</p> <p>Selain itu jenis input yang sudah ada sebelum HTML5 (<code>teks</code>, <code>kata sandi</code>, <code>menyerahkan</code>, <code>atur ulang</code>, <code>radio</code>, <code>kotak centang</code>, <code>tombol</code>, <code>tersembunyi</code>), kita juga bisa menggunakan yang berikut ini <strong>jenis input HTML5 semantik</strong>: <code>e-mail</code>,<code>tel</code>,<code>url</code>,<code>jumlah</code>,<code>waktu</code>,<code>tanggal</code>,<code>tanggal Waktu</code>,<code>datetime-local</code>, <code>bulan</code>,<code>minggu</code>, <code>jarak</code>, <code>pencarian</code>,<code>warna</code>.</p> <p>Kami dapat menggunakan jenis input HTML5 dengan aman dengan browser lama, karena mereka akan berperilaku sebagai <code><input type="text"></code> bidang di browser yang tidak mendukungnya.</p> <p>Mari kita lihat apa yang terjadi ketika pengguna memasukkan tipe input yang salah. Katakanlah kita telah membuat bidang masukan email dengan kode berikut:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Email mu:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Saat pengguna mengetik string yang tidak menggunakan format email, algoritma validasi kendala <strong>tidak mengirimkan formulir</strong>, dan <strong>mengembalikan pesan kesalahan</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Aturan yang sama juga berlaku untuk tipe input lain, misalnya untuk <code>type = "url"</code> pengguna hanya dapat mengirimkan input yang mengikuti format URL (dimulai dengan protokol, seperti <code>http: //</code> atau <code>ftp: //</code>).</p> <p>Beberapa tipe input menggunakan desain itu <strong>bahkan tidak mengizinkan pengguna untuk memasukkan format input yang salah</strong>, sebagai contoh <code>warna</code> dan <code>jarak</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Warna latar belakang:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Jika kita menggunakan <code>warna</code> tipe input pengguna dibatasi untuk memilih warna dari color picker atau tetap dengan default hitam. Kolom input adalah <strong>dibatasi oleh desain</strong>, karena itu tidak meninggalkan banyak peluang untuk kesalahan pengguna.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Bila pantas, ada baiknya mempertimbangkan menggunakan <code><select></code> Tag HTML yang bekerja serupa dengan tipe input yang dibatasi oleh desain ini; itu memungkinkan pengguna memilih dari daftar dropdown.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Buah Favorit Anda:</label> <select name="fruit"> <option value="apple">apel</option> <option value="pear">Pir</option> <option value="orange">Jeruk</option> <option value="raspberry">Frambos</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Gunakan Atribut Validasi HTML5</h4> <p>Menggunakan tipe input semantik menetapkan batasan tertentu pada apa yang pengguna boleh kirimkan, tetapi dalam banyak kasus kami ingin melangkah lebih jauh. Inilah saatnya <strong>atribut terkait validasi</strong> dari <code><input></code> tag dapat membantu kami.</p> <p>Atribut yang terkait dengan validasi termasuk tipe input tertentu (tidak dapat digunakan pada <em>semua</em> jenis) di mana mereka memberikan batasan lebih lanjut.</p> <h5>1. <code>wajib</code> untuk mendapatkan input yang valid dengan segala cara</h5> <p>Itu <code>wajib</code> atribut adalah atribut validasi HTML yang paling terkenal. Itu adalah <strong>atribut boolean</strong> yang artinya <strong>tidak mengambil nilai</strong>, kita hanya perlu meletakkannya di dalam <code><input></code> tag jika kita ingin menggunakannya:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Jika pengguna lupa memasukkan nilai ke dalam kolom input yang diperlukan, browser <strong>mengembalikan pesan kesalahan</strong> yang memperingatkan mereka untuk mengisi bidang, dan mereka <strong>tidak dapat mengirimkan formulir</strong> sampai mereka memberikan input yang valid. Itu sebabnya penting untuk selalu <strong>tandai secara visual</strong> bidang yang diperlukan untuk pengguna.</p> <p>Itu <code>wajib</code> atribut bisa <strong>digunakan bersama dengan tipe input berikut</strong>: <code>teks</code>, <code>pencarian</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code>, <code>kata sandi</code>, <code>tanggal</code>, <code>tanggal Waktu</code>, <code>datetime-local</code>, <code>bulan</code>, <code>minggu</code>,<code>waktu</code>, <code>jumlah</code>, <code>kotak centang</code>, <code>radio</code>, <code>mengajukan</code>, ditambah dengan <code><textarea></code>dan <code><select></code> Tag HTML.</p> <h5>2. <code>min</code>, <code>maks</code> dan <code>langkah</code> untuk validasi angka</h5> <p>Itu <code>min</code>, <code>maks</code> dan <code>langkah</code> atribut memungkinkan kita untuk <strong>menempatkan kendala pada bidang input angka</strong>. Mereka dapat digunakan bersama dengan <code>jarak</code>, <code>jumlah</code>, <code>tanggal</code>, <code>bulan</code>, <code>minggu</code>, <code>tanggal Waktu</code>, <code>datetime-local</code>, dan <code>waktu</code> tipe input.</p> <p>Itu <code>min</code> dan <code>maks</code> atribut menyediakan cara yang bagus untuk mudah <strong>mengecualikan data yang tidak masuk akal</strong>. Misalnya, contoh di bawah ini memaksa pengguna untuk mengirimkan usia antara 18 dan 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Usia kamu:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Ketika algoritma validasi kendala menabrak input pengguna yang lebih kecil dari <code>min</code>, atau lebih besar dari <code>maks</code> nilai, itu mencegahnya mencapai backend, dan mengembalikan pesan kesalahan.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>Itu <code>langkah</code> atribut <strong>menentukan interval numerik</strong> antara nilai hukum dari bidang input numerik. Misalnya, jika kami ingin pengguna hanya memilih dari tahun kabisat, kami dapat menambahkan <code>step = "4"</code> atribut ke lapangan. Dalam contoh di bawah ini saya menggunakan <code>jumlah</code> tipe input, karena tidak ada <code>type = "tahun"</code> dalam HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Tahun Kabisat Favorit Anda:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Dengan batasan yang telah ditentukan sebelumnya, pengguna hanya dapat memilih dari tahun kabisat antara tahun 1972 dan 2016 jika mereka menggunakan panah atas kecil yang disertakan <code>jumlah</code> tipe masukan. Mereka juga dapat mengetik nilai secara manual ke dalam kolom input, tetapi jika tidak memenuhi kendala, browser akan mengembalikan pesan kesalahan.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>panjang maksimal</code> untuk validasi panjang teks</h5> <p>Itu <code>panjang maksimal</code> atribut memungkinkan untuk <strong>atur panjang karakter maksimum</strong> untuk bidang input tekstual. Dapat digunakan bersama dengan <code>teks</code>, <code>pencarian</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code> dan <code>kata sandi</code> jenis input, dan dengan <code><textarea></code> Tag HTML.</p> <p>Itu <code>panjang maksimal</code> atribut dapat menjadi solusi yang sangat baik untuk bidang nomor telepon yang tidak boleh memiliki lebih dari jumlah karakter tertentu, atau untuk formulir kontak di mana kami tidak ingin pengguna menulis lebih dari panjang tertentu.</p> <p>Cuplikan kode di bawah ini menunjukkan contoh untuk yang terakhir, itu membatasi pesan pengguna hingga 500 karakter. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Pesan (maks 500 karakter):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

Itu panjang maksimal atribut tidak mengembalikan pesan kesalahan, tetapi browser tidak membiarkan pengguna mengetik lebih dari jumlah karakter yang ditentukan. Itu sebabnya sangat penting untuk beri tahu pengguna tentang batasannya, jika tidak mereka tidak akan mengerti mengapa mereka tidak bisa melanjutkan pengetikan.

 
 * Kata sandi Anda: