Validasi Form Secara Realtime dengan Javascript

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.

Iklan

4 Komentar

Filed under Tutorial

4 responses to “Validasi Form Secara Realtime dengan Javascript

  1. that’s awesome. matur suwun banget. keep going. see ya….!!!!

  2. cermindatar

    mantap tak… tapi perlu perbaikan sedikit dibagian validasi emailnya.
    Salah satu solusinya bisa dengan mengecek indeks setelah titik (indeks “.” +1).
    Kalau hasilnya string kosong berarti format email masih belum valid. Sebaliknya jika bukan string kosong berarti sudah valid.
    Kalau yang lebih kompleks lagi bisa dengan memfilter karakter-karakter tertentu yang gak mungkin ada di email seperti tanda tanya.
    Ditunggu skrip versi selanjutnya….

  3. takkay

    beres boz! thx sarannya…

  4. wah kalo semua isiannya udah benar, pasword sm confirmasi paswordnya sama tapi kemudian paswornya kuganti lagi tanpa diikuti confirmasinya (jadinya kan beda) harusnya ga falid tapi kok tetap falid aja.. gmn ya?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s