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

Tutorial HTML5 Form

HTML5 LogoSaat kita belajar dasar dasar pemrograman berbasis web, maka hal penting yang harus dikuasai adalah masalah input tipe dan validasinya. Dalam HTML versi sebelumnya, input hanya terbatas pada text,file,dan password. Lalu untuk memvalidasi misalkan input harus angka, kita harus menggunakan javascript, jQuery ataupun menggunakan teknik serverside programming. Dengan munculnya HTML5, input form diweb menjadi lebih kaya dan lebih mudah dipakai.

Dalam artikel kali ini, saya fokus ke dua hal; pertama, masalah attribute baru di input dan yang kedua tentang input baru di HTML5.

Attribute baru di HTML5 Form

Di Html5, ada  3 attribute baru yang bisa langsung dipakai dan sangat bermanfaat bagi user dan developer. Attribute itu adalah placeholder, autofocus dan required.

Placeholder.

Placeholder adalah text abu abu yang muncul di input form. Text ini hanya akan muncul jika input belum di isi, placeholder juga sangat bermanfaat untuk layar kecil karena placeholder bisa dijadikan pengganti label.

 autofocus

Fitur HTML5 yang membuat input langsung tersorot saat membuka form, biasanya input pertama. Ini sangat bermanfaat sehingga user tidak perlu meletekan kursor secara manual di input form.

required

Fitur ini adalah fitur validasi dasar di HTML5, Jika sebuah attribute ditambah ¬†attribute required, maka jika input kosong, maka akan muncul pesan “Please fill this out” atau kalimat sejenis. Pesan error akan muncul berbeda tergantung browser.

Berikut ini contoh penggunakan 3 attribute tadi

<form class="pure-form pure-form-stacked">
	<fieldset>
		<label for="name">Your Name</label>
		<input id="name" type="text" placeholder="Your Name" 
		autofocus 
		>
		<label for="email">Your Email</label>
		<input id="email" type="email" placeholder="Your Email" required>

		<label for="password">Your Password</label>
		<input id="password" type="password" placeholder="Your Password">

		<button type="submit" class="pure-button">
		Sign Up
		</button>
         </fieldset>
</form>

Output tampilan kurang lebih seperti ini :

HTML5 form
HTML5 form

Input baru di HTML5

Selain 3 attribute diatas, HTML5 juga mempunyai banyak input baru.
Berikut ini adalah daftar input baru di HTML5

  1. color, input warna
  2. date, input tanggal, mirip dengan jquery UI date
  3. datetime, tanggal dan waktu
  4. datetime-local, tanggal dan waktu dengan format lokal.
  5. email, email input
  6. month, bulan
  7. number, angka
  8. range, slider nilai antara min sampai max.
  9. search , input pencarian
  10. tel, input nomor telepon
  11. time, input waktu (jam:menit:detik)
  12. url, input URL, website
  13. week, input week , minggu dalam satu tahun.

Hal penting disini, tidak semua browser mendukung semua input diatas. Jika browser tidak mendukung input baru di HTML5, maka input akan kembali kedafult yaitu input='text' Jika anda ingin mengecek apakah browser anda mendukung, cek html5test.com.

Sample code
Berikut ini adalah contoh penggunaan HTML5 input di Form.

<form class="pure-form pure-form-stacked">
	<fieldset>

	<label for="name">Nama event</label>
	<input id="name" type="text" placeholder="Nama event" 
	autofocus required >

     <!-- input waktu -->
	<label for="jam">Jam </label>
	<input id="jam" type="time" placeholder="Your time">
	
	<!--input warna-->
	<label for="warna">Warna pakaian </label>
	<input id="warna" type="color" placeholder="masukan warna">

	<!-- input harus angka -->
	<label for="time">Maximal teman yang diajak</label>
	<input id="time" type="number" required placeholder="masukan jumlah teman">
	
<!-- input dalam format slider, misalkan nilai siswa antara 0-100.
Jika nilai ingin ditampilkan saat slider digeser, 
tetap harus minta bantuan javascript -->
	<label for="tiket">Tiket</label>
	<input id="tiket" type="range"  min='1' max='100' placeholder="Harga tiket">

<!--- ini yang keren, tanpa jquery UI calendar, 
sekarang kita bisa menampilkan calendar dengan mudah, cukup gunakan input date--->
	<label for="tanggal">Tanggal Masuk</label>
	<input id="tanggal" type="date" placeholder="Your tanggal" required>
	
	<button type="submit" class="pure-button">
	Simpan
</button>
</fieldset>
</form>

Contoh tampilan HTML5 date input di Google chrome

contoh tampilan date calendar html5, TANPA JQUERY
contoh tampilan date calendar html5, TANPA JQUERY

Bagian ini baru pengantar, dari pengantar ini tampak ada kekurangan diantarnya masalah validasi, bagaimana jika kalimat error yang muncul kita buat sendiri (custom validation), bagaimana saya mendeteksi format text yang benar? misalkan input kode post atau pattern tertentu, apakah HTML5 memvasilitasi hal tersebut? Silahkan baca artikel selanjutnya
 
Demo dan informasi lanjut bisa dilihat disini:

  1. Demo HTML5
  2. W3schools html5 input type