Validasi Form Secara Realtime dengan Javascript

Lompat ke Komentar

Salah satu masalah yang paling sering muncul pada aplikasi web yang memanfaatkan form sebagai sarana menerima input dari user adalah tingkat kevalidan data yang diinput. Ada saja user yang “iseng” atau kurang teliti, sehingga menginput data tidak sesuai kebutuhan aplikasi. Misalnya sebuah aplikasi pendaftaran mensyaratkan user menginput password yang sama sebanyak 2 kali untuk konfirmasi. User yang kurang teliti bisa saja menginput data yang berbeda antara password dengan konfirmasi password.

Masalah seperti ini sebenarnya bisa saja diatasi dengan bahasa server side pengolah form seperti PHP dan ASP. Namun, menggunakan bahasa server side untuk menguji kevalidan data yang diinput memiliki kekurangan, yaitu tidak dapat dilakukan secara real time. User harus mensubmit form terlebih dahulu, lalu menunggu proses validasi. Jika data tidak valid, maka proses pengisian data terpaksa harus diulangi. Cara seperti ini tentu tidak efisien karena memakan waktu dan juga bandwith.

Javascript adalah solusinya. Dengan javascript kita bisa menguji kevalidan data yang diinput user langsung secara real time tanpa harus menunggu form disubmit terlebih dahulu. Idenya sih sederhana saja. Tombol submit di-disable selama user belum menginput data secara valid, sehingga form baru bisa disubmit setelah semua data diisi dengan benar.

Saya membuat contoh Aplikasi pendaftaran sederhana yang mensyaratkan user menginput data username minimal 5 karakter, menginput konfirmasi password, dan menginput email secara benar. Jadi, ada 3 hal yang harus dicek kevalidan datanya pada aplikasi pendaftaran ini.

Silahkan download contoh skripnya disini atau melihat demonya disini.

Cara ini tentu tidak tanpa resiko. Akan menjadi masalah yang sangat besar jika user menggunakan browser yang tidak support javascript atau fungsi javascript browser dimatikan. Proses validasi tidak akan berjalan sama sekali. Lebih buruknya lagi, form tidak akan bisa disubmit, sehingga proses registrasi tidak akan bisa dilakukan.

& Komentar

Filed under Tutorial