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

Categories: HTML5

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

7 Comments

Ahmad · 5 February , 2017 at 11:21 pm

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

maulana · 9 November , 2015 at 1:36 am

terima kasih banyak pak :) sangat membatu

kika · 4 May , 2015 at 10:14 pm

Terima kasih ilmunya, jadi semangat ngerjain TA hihihihi

Danar Syailendra · 26 April , 2015 at 11:43 pm

kalau inputan hanya abcd gimana?

irfanpule · 14 December , 2014 at 8:42 pm

luar biasa mas.. mantab.. klo mau input hanya alfabet dari a-zA-Z dan ada spaci gmn ya ?

Nisa · 3 December , 2014 at 11:13 am

makasih mas bermanfaat

hendri ekasatria · 4 October , 2014 at 8:58 pm

Trims mas. Tolong lanjutin html5 nya terus ya. Moga bisa jadi satu modul lengkap :)

Comments are closed.