Tips Mudah Membuat Form Validasi dengan HTML5

Saat kita mengisi sebuah form dalam sebuah sistem maka sistem tersebut harus tervalidasi agar ketika orang awam mengisi data yang salah bisa diperbaiki dan tidak menjadi sampah di dalam database bahkan mungkin bisa eksploitasi keamanan web Anda. Saat ini kita akan membahas tentang validasi form di HTML5 yang ternyata sangat powerful dan mengurangi kode validasi yang dulunya menggunakan javascript ataupun jQuery. Berikut ini adalah beberapa cara membuat validasi form dengan HTML5 :

1. Input type khusus

HTML 5 memperkenalkan beberapa jenis input type baru. Input type tersebut dapat digunakan untuk membuat kotak masukan, yang akan menerima data tertentu saja. Tapi input type khusus ini tidak semuanya bisa support dengan semua browser. Jenis input type baru tersebut yakni sebagai berikut:

  • Number untuk input field yang harus berisi nilai numerik
  • Date untuk input field yang harus berisi tanggal
  • Range untuk input field yang harus berisi nilai dalam jangkauan
  • Month memungkinkan pengguna untuk memilih bulan dan tahun
  • Week memungkinkan pengguna untuk memilih satu minggu dan tahun
  • Time memungkinkan pengguna untuk memilih waktu (tidak ada zona waktu)
  • Datetime memungkinkan pengguna untuk memilih tanggal dan waktu (dengan zona waktu). Input type ini tidak support di Chrome, Firefox, ataupun Internet Explorer
  • Datetime-local memungkinkan pengguna untuk memilih tanggal dan waktu (dengan zona waktu). Input type ini tidak support di  Firefox dan Internet Explorer
  • Email untuk input field yang harus berisi alamat email
  • Search untuk pencarian field (kolom pencarian berperilaku seperti kolom teks biasa)
  • Tel untuk input field yang harus berisi nomor telepon dan hanya support di savari 8
  • Url untuk input field yang harus berisi alamat URL

2. Required Fields

Dengan hanya menambahkan atribut “required” untuk <input>, <select> atau <textarea>, kita memberitahu browser bahwa nilai harus diisi di field ini

3. Limit/Batas

Untuk membatasi inputan yang dimasukan kedalam data kita bisa menggunakan atribut maxlength untuk membatasi maksimum data yang dimasukan

<input type="text" name="nama" required  maxlength="15">

Dan untuk input type number bisa menggunakan atribut max dan min untuk membatasi nilai. Misalnya kita ingin memasuka usia minimal 18 tahun maka kita bisa menggunakan

<input type="number" name="usia" min="18" required>

4. Styling

CSS Pseudo-classes digunakan untuk menentukan keadaan khusus dari suatu elemen. Berikut ini adalah class Pseudo-classes CSS3 yang biasa digunakan

  • Valid
  • Invalid
  • Required
  • Optimal
  • In-range
  • Out-of-range
  • Read-only
  • Read-write

Dalam contoh kali ini kita kombinasikan class Pseudo-classes “valid” dan “invalid” dengan selektor “focus” agar kolom form berwarna merah atau berwarna hijau saat pengguna mulai mengetik

input:focus:invalid,

textarea:focus:invalid{

        border:solid 2px #F5192F;

}

input:focus:valid,

textarea:focus:valid{

        border:solid 2px #18E109;

        background-color:#fff;

}

5. Tooltips

Dengan menggunakan atribut “title” pada form input maka akan muncul validasinya. Setiap browser berbeda seperti pada chrome nilai atribut title akan muncul dibawah form input dengan font yang lebih kecil. Berikut ini adalah contoh scriptnya

<input type="text" name="nama" title="Nama harus diisi" required>

6. Patterns

Pattern digunakan untuk mencocokan string teks dengan pola tertentu seperti inputan data harus angka, ataupun harus huruf kapital. Validasi ini merupaka validasi tingkat lanjut dalam HTML 5. Jika Anda terbiasa dengan regex kita bisa membuat validasi form tanpa bantuan jQuery. Berikut ini adalah contoh scriptnya

<input type="text" name="nama" required pattern="[a-zA-Z]+" title="example@mail.com">

Comments

comments