Validasi Form Menggunakan JQuery Validation Engine

Validasi form merupakan suatu cara untuk memeriksa suatu data yang akan diinputkan oleh user. Jadi sebelum data diinput kedalam sebuah database atau dikirim ke server maka terlebih dahulu data tersebut diperiksa sah atau tidaknya data tersebut untuk diinput kedalam sebuah database atau dikirim ke server. Apabila data tersebut sah untuk diinputkan maka user dinyatakan sukses dalam penginputan data, namun apabila data tersebut tidak sah untuk diinputkan maka akan terjadi sebuah peringatan atau pesan singkat yang intinya data tersebut tidak sah untuk diinput atau data tersebut tidak valid.

Peringatan validasi form banyak macamnya, misalnya field pada textbox A tidak boleh kosong, field pada textbox B harus berupa karakter angka atau huruf saja, field pada textbox C hanya bisa diisi minimal 6 karakter, field pada textbox C hanya bisa diisi maximal 12 karakter, dan lain sebagainya. Banyak library-library milik JQuery untuk keperluan penanganan validasi form, namun salah satu library JQuery yang menurut penulis menarik yaitu JQuery Validation Engine. Nah, pada pembahasan kali ini kita akan membuat sebuah form yang akan divalidasi menggunakan JQuery Validation Engine yang dapat didownload pada situs https://github.com/posabsolute/JQuery-Validation-Engine. Apabila sudah didownload extract file-nya, tapi alangkah baiknya sebelum di ekstract Anda buat dulu sebuah folder dengan nama validasi_form dan simpan folder tersebut pada directory C:\xampp\htdocs\ lalu simpan hasil file extract Anda pada folder validasi_form.

Langsung saja kepada pembahasan. Anda buat file baru dengan nama validasi.php dan simpan fie tersebut dalam folder validasi_form. Untuk script programnya dapat Anda lihat dibawah ini :

Kemudian Anda buat lagi sebuah file dengan nama test_validasi.php, lalu silahkan Anda ketik lagi script programnya seperti dibawah ini :

Setelah selesai buka web browser Anda lalu ketika localhost/validasi_form/validasi.php maka hasilnya dapat Anda lihat seperti gambar dibawah ini :

validasi_form

Om Yenda, apa pesan validasi form-nya dapat dibahasa Indonesia-kan??.. Tentu saja bisa, caranya sangan mudah kok!! Anda cukup panggil atau sisipkan file jquery.validationEngine-id.js pada file validasi.php dan hapus pemanggilan file jquery.validationEngine-en.js pada script program validasi.php. Bahkan Anda pun bisa mengedit pesan validasi yang ingin ditampilkan pada halaman web browser Anda dengan mengedit file jquery.validationEngine-id.js. Silahkan Anda edit pada file tersebut sesuai ke inginan Anda.

Yang menjadi kunci utama pada validasi form diatas adalah dengan menyisipkan atau memanggil library JQuery yang dibutuhkan seperti pada potongan script program dibawah ini :

Setelah itu buat script JQuery beserta nama elemennya (dalam hal ini nama elemennya yaitu id frm_siswa) dengan tujuan untuk mengontrol objek yang nantinya akan kita beri seleksi validasi form, adapun script programnya dapat ditujukan sebagai berikut ini :

Terapkan nama elemen yang telah dibentuk diatas melalui script HTML. Dalam hal ini nama elemen yang telah dibentuk pada script JQuery diatas yaitu elemen id frm_siswa (“#frm_siswa”), adapun script programnya sebagai berikut :

Validasi data pada elemen untuk pemasukan data dalam form ditangani melalui script program seperti dibawah ini :

Kunci penting dalam memvalidasi data terletak pada atribut class. Dalam hal ini yaitu validate[required] yang menyatakan bahwa elemen input harus diisi atau datanya tidak boleh kosong. Adapun pernyataan atribut class yang menyatakan seperti ini :

validate[required,custom[email]]

Nilai tersebut menyatakan bahwa alamat email harus valid, contohnya yenda.message@gmail.com

Nah itulah implementasi untuk penerapan validasi form menggunakan JQuery Validation Engine, sampai bertemu lagi di artikel selanjutnya..

One Comment on “Validasi Form Menggunakan JQuery Validation Engine”

Leave a Reply

Your email address will not be published. Required fields are marked *