Melanjutkan pembahasan tentang HTML5 Form, kali ini kita akan fokus kepermasalahan validasi di HTML5. Validasi form di HTML5 ini ternyata sangat powerful dan mengurangi kode validasi yang dulunya menggunakan javascript ataupun jQUery. Untuk pembahasan validasi, saya akan membagi menjadi 3 bagian yaitu validasi dasar, validasi pattern (REGEX) dan cara menampilkan pesan custom divalidasi. Semua pesan error yang muncul di screenshot adalah pesan error di Browser chrome 37. Pesan error yang muncul di browser lain mungkin berbeda.
Valdiasi dasar
Validasi palign dasar di html5, cukup gunakan attribute required di input.
<label for="name">Nama event</label> <input id="name" type="text" placeholder="Your event" autofocus required>
Berikut ini adalah pesan error yang muncul saat tombol simpan di klik.
Pattern Regex
berikut ini saya akan mendemokan cara validasi input agar input hanya berupa alpahabet, huruf besar atau kecil tanpa spasi.
Validasi ini adalah validasi pattern tingkat lanjut. Jika anda terbiasa dengan regex, anda bisa membuat validasi input dengan
sangat mudah tanpa bantuan jQuery.
<form> <fieldset> <label for="name">username</label> <input id="name" type="text" pattern="[a-zA-Z]+" placeholder="username" autofocus required> <button type="submit"> Simpan </button> </fieldset> </form>
Hasilnya jika disubmit dan input tidak sesuai pattern
Tutorial Pattern input
Pattern ini polanya didapat dari regex. Jika anda ingin melihat pattern lain yang bisa dipakai untuk validasi HTML5, silahkan cek di website http://html5pattern.com dan website http://www.regular-expressions.info/examples.html
Mengcustom pesan error
Bagaimana kita mengganti pesan error yang muncul agar sesauai dengan kebutuhan kita? Misalkan pesan error di contoh sebelumnya bertuliskan “please match the requested format”. Kata kata ini susah dipahami. Sekarang, kalau kata itu kita ganti menjadi “Input hanya boleh huruf a-z tanpa spasi!”.
<input id="name" type="text" pattern="[a-zA-Z]+" placeholder="username" autofocus required oninvalid="this.setCustomValidity('Input hanya boleh huruf a-z tanpa spasi!')" >
Terima kasih gan, oia friend ada yang bisa nampilin grafik di file php di dalam modul ga? ana udah coba beberapa hari tapi kok tetap ga bisa tampil yach, modul untuk penerimaan siswa baru yang diterima dan tidak diterima dalam tiap tahunnya.. trims
terima kasih banyak pak :) sangat membatu
Terima kasih ilmunya, jadi semangat ngerjain TA hihihihi
kalau inputan hanya abcd gimana?
luar biasa mas.. mantab.. klo mau input hanya alfabet dari a-zA-Z dan ada spaci gmn ya ?
makasih mas bermanfaat
Trims mas. Tolong lanjutin html5 nya terus ya. Moga bisa jadi satu modul lengkap :)