Validasi ialah proses yang dilakukan untuk mengecek apakah suatu data telah sesuai persyaratan ataupun tidak. Dalam membangun sebuah aplikasi, proses validasi sangat diperlukan. Validasi ini dilakukan untuk membatasi hanya data tertentu saja yang akan diproses nantinya jika dikirim ke server/database.
Di web sendiri proses validasi dibagi atas 2 yaitu, validasi yang dilakukan di bagian front end (biasanya menggunakan jQuery atau HTML5) dan validasi langsung pada bahasa pemrograman. Kelebihan dari validasi di bagian front end ialah tidak membebani kinerja server karena harus berulang kali mengecek kebenaran suatu data.
Hadirnya HTML5 sudah tentu dibarengi dengan performa barunya. Salah satunya ialah penambahan tag validasi data yang langsung bisa kita terapkan pada form. Disini akan dijelaskan bagaimana cara mem-validasi form inputan menggunakan HTML5.
Jangan Lupa
HTML5 mengharuskan Anda untuk mengawali penulisan dengan perintah <!DOCTYPE html>. Contoh :
<!DOCTYPE html> <html> <head> <title> Validasi Form dengan HTML5 </title> </head>
Textbox
<form action="" method="post">
<input type="text" required="required" placeholder="Judul" />
<input type="submit" value="Submit">
</form>
Validasi Email
<form action="" method="post">
<input type="email" required="required" placeholder="[email protected]" />
<input type="submit" value="Submit">
</form>
URL Website
<form action="" method="post">
<input type="url" name="website" required="required" placeholder="https://www.eplusgo.com">
<input type="submit" value="Submit">
</form>
Custom URL Website (https)
<form action="" method="post">
<input type="url" name="website" required="required" placeholder="https://www.eplusgo.com" pattern="pattern="https?://.+" title="Starthttps://">
<input type="submit" value="Submit">
</form>
Memberi Batasan Teks Minimum
<form action="" method="post">
<input type="text" pattern=".{5,}" title="Minimum 5 karakter" placeholder="Ketikkan" required="required">
<input type="submit" value="submit" />
</form>
Validasi IP Address
<form action="" method="post">
<input type="text" required="required" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" placeholder="192.168.1.1" title="192.168.1.1"/>
<input type="submit" value="Submit">
</form>
Validasi Tanggal
<form action="" method="post">
<input type="date" required="required" placeholder="mm/dd/yyyy" title="1/10/2014" />
<input type="submit" value="Submit">
</form>
Validasi Angka
<form action="" method="post">
<input type="number" required="required" placeholder="Ketikkan Angka" />
<input type="submit" value="Submit">
</form>
Catatan
Perintah required="required" digunakan untuk mengharuskan setiap inputan untuk diisi (tidak boleh kosong). Perintah required dapat Anda implementasikan pada inputan data lainnya yang ada pada HTML, seperti Select Box, Textarea, Listbox dan lainnya.
