Menambahkan Validasi pada Form
Setelah kita berhasil membuat sebuah form dengan tampilan yang menarik pada materi sebelumnya, kita juga perlu memastikan aplikasi kita dapat berjalan lancar dengan memberikan validasi pada form yang kita buat.
Saat aplikasi kita sudah bisa diakses banyak orang, kita tidak terlalu bisa memastikan bagaimana cara mereka menggunakan aplikasi kita. Bisa saja mereka mengisi form kita dengan data yang tidak sesuai, seharusnya angka malah diisi dengan teks, begitu pun sebaliknya.
Atau bisa saja mereka tidak bermaksud memberikan data yang salah, hanya tidak sengaja karena kurangnya pengetahuan mereka tentang aplikasi yang kita buat. Untuk menghindari hal-hal tersebut, mari kita validasi form yang sebelumnya telah kita buat!
<input type="text" id="fname" name="firstname" placeholder="Your name.." required>Salah satu cara memberikan validasi sederhanapada HTML adalah dengan atribut required untuk mewajibkan pengguna mengisi sebuah elemen input dan select tersebut.
<input type="text" id="fname" name="firstname" placeholder="Your name.." required pattern="^[a-zA-Z\s]+$
">Dengan atribut pattern, kita dapat memberikan validasi spesifik berupa pola karakter apa saja yang boleh diisi ke dalam elemen tersebut. Nilai dari atribut ini berupa regex. Mari kita sedikit mengenal mengenai regex.
Apa itu Regex?
Regex (Regular Expression) sering digunakan untuk membuat pola karakter yang selanjutnya akan dicocokkan dengan input dari pengguna. Regex terdiri dari karakter-karakter berikut ini.
.(titik): Cocokkan dengan karakter apa pun, kecuali karakter baris baru.\d: Cocokkan dengan angka.\w: Cocokkan dengan karakter huruf atau angka.*: Cocokkan dengan nol atau lebih dari karakter sebelumnya.+: Cocokkan dengan satu atau lebih karakter sebelumnya.?: Cocokkan dengan nol atau satu karakter sebelumnya.[]: Cocokkan dengan satu karakter yang termasuk dalam set karakter tertentu.()(kurung): Mengelompokkan bagian dari pola untuk mencocokkan atau
Dari regex yang kita gunakan untuk validasi di atas :
^(caret): Ini menandakan awal dari teks yang akan dicocokkan.[a-zA-Z]: Ini adalah karakter set yang akan dicocokkan.[a-zA-Z]berarti karakter harus merupakan huruf (A-Z atau a-z). Artinya, hanya huruf alfabet yang akan cocok.\s: Ini adalah karakter whitespace, yang termasuk spasi. Jadi,\sakan mencocokkan spasi.+: Ini menandakan bahwa karakter sebelumnya (karakter huruf atau spasi) dapat muncul satu atau lebih kali.$: Ini menandakan akhir dari teks yang akan dicocokkan.
Terlihat menarik sekaligus rumit, bukan? Teman-teman boleh sedikit mempelajari mengenai Regex, namun sebenarnya sudah banyak pola regex yang ada di internet yang bisa teman-teman langsung gunakan untuk membuat sebuah validasi. Misalnya untuk memvalidasi alamat email, nomor telepon dan sebagainya.
Referensi
Last updated