Membuat Validasi Form Dengan Jquery

Dalam setiap pembuatan aplikasi baik itu aplikasi berbasis web dan dekstop hal wajib yang dilakukan adalah membuat validasi form dimana kegunaan validasi form tersebut sangat penting untuk meminimalisir kesalahan dalam pengimputan data pada form. Ok sobat pada postingan kali saya akan share langkah-langkah membuat sebuah form validasi pendaftaran untuk aplikasi berbasis web, menggunakan jquery lebih tepatnya yaitu menggunakan plugin  Jquery 1.4 dan  Jquery.Validasi.

Dengan adanya jquery ini pembuatan form validasi jadi lebih simpel dan menarik sehingga banyak pengembang website memanfaatkan plugin jquery untuk mempercantik websitenya. Kembali ketopik saya akan membuat form pendaftaran dengan tampilan seperti dibawah ini, dimana error akan muncul jika inputan pada textfield salah atau tidak valid. Pesan error akan muncul disamping kanan textfield dan jika data yang di inputkan benar maka Pesan error akan berganti menjadi OK..Error bersifat interaktif dimana pesan akan muncul sesuai dengan data yang di inputkan. berikut tampilannya :

Contoh tampilan form saat sudah divalidasi

Selanjutnya langkah-langkahnya :

1. Buat dulu form htmlnya contoh sederhananya seperti gambar diatas copy script html dibawah ini pada text editor  yang sobat gunakan pada tutorial ini saya mengunakan dreamweaver CS5 untuk desain dan kodingnya:




2. Tampilan gambarnya akan terlihat seperti ini





3. Agar tampilan form validasi tersebut menarik kita perlu menambahkan file css, untuk file css sobat bisa copy paste code dibawah ini kemudian simpan dengan nama style.css :




4. Kemudian panggil file css tersebut caranya link kan css diantara title dan head lihat gambar di bawah ini :





5. Sekarang tambahkan plugin jquery untuk plugin jquerynya anda bisa mendownloadnya disini


6. Setelah itu panggil file jquerynya caranya seperti gambar diawah ini :





7. Kemudian tambahkan text javascript berikut tepat di bawah file jquery tersebut

Sampai disini sobat sudah menyelesaikan tahapan-tahapanya untuk melihat demonya disini dan source kode lengkapnya download disini

Penjelasan kode pada text javascript:
untuk memvalidasi form, kita panggil method validate, ada 2 opsi pada method validate yaitu rules dan messages
rules = " parameter-parameter yang akan divalidasi "
required = " artinya inputan tidak boleh kosong "
minlength = " jumlah karakter minimal yang harus di input "
equalto = " inputan yang dimasukkan harus sama "
email = " karakter yang di inputkan harus sesuai dengan format email "
messanges =  " tampilan yang muncul ketika data yang di inputkan salah "

Sekian dulu tutorial kali ini dan sobat bisa  mengembangkanya sendiri selamat mencoba....stay tone-up terus.., tunggu postingan-postingan berikutnya...

[{--Salam Semoga Bermamfaat--}]