Client side validasi form dengan jQuery validationEngine


Saat membuat suatu form menggunakan aplikasi web, kita mungkin sering menggunakan validasi baik disisi client maupun disisi server. Validasi pada form digunakan untuk menjamin data yang akan disimpan ke dalam database bersifat reliable. Pertanyaan yang mungkin mendasari alasan mengapa perlu dibuatkan validasi juga di sisi client, kalau nanti di sisi server juga dibuat validasi? Hal ini karena dengan menggunakan validasi form pada sisi client, akan mempermudah kerja server, sehingga server tidak selalu sibuk untuk memproses  validasi dan mengembalikan hasil jika nilai tidak sesuai. Salah satu alternatif untuk melakukan client side form validation dengan jQuery validationEngine. Untuk source nya bisa diunduh di Github, sedangkan demo nya bisa dilihat disini.

Nah, apa yang menarik dengan menggunakan validationEngine ini?

  1. Notifikasi pesan secara default ada diujung kanan dari form input, dan mudah untuk ditutup cukup mengklik notifikasi tersebut, sehingga tidak perlu mengubah CSS atau desain HTML yang telah kita buat.
  2. Validasi field input menggunakan element class, disini lah tempat kita menggunakan jenis validasi yang digunakan
  3. Mendukung validasi dengan menggunakan Regular Expression (RegEx) seperti untuk email, tanggal, telepon, IP, dll. Jika kita ingin menambahkan regex tersendiri, misalnya membuat format NIM, dapat ditambahkan ke dalam script
  4. Mendukung proses validasi yang kompleks dengan Ajax, misalnya untuk melihat daftar username yang tersedia

Berikut contoh ketika saya mengaplikasikan validationEngine ke dalam suatu form aplikasi web yang saya buat.

Ilustrasi pertama adalah proses memeriksa NIM terdaftar dengan menggunakan AJAX. Sedangkan pada ilustrasi berikutnya, proses yang saya lakukan adalah membuat validasi untuk masing-masing field, dilakukan validasi ketika fokus kursor berpindah ke field berikutnya. Jika  dilakukan register, proses yang dilakukan adalah melakukan evaluasi form (evaluate) secara keseluruhan, jika dikembalikan nilai true maka dilanjutkan proses oleh server.

Semoga dengan tulisan singkat ini dapat menambah alternatif teman-teman dalam membuat validasi  form pada suatu aplikasi web. Jika ada kesulitan, jangan segan untuk bertanya baik lewat forum ataupun email, trims 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s