Tutorial validasi Input HTML5 Form

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.
error

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

pattern input harus huruf
pattern input harus huruf

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!')"
>
	

hasil pesan erornya
customerror

7 Replies to “Tutorial validasi Input HTML5 Form”

  1. 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

Tinggalin komentar dong!