Validasi Form Menggunakan jQuery Validation Plugin

jquery

jQuery Validation adalah salah satu plugin yang tersedia pada jQuery yang berguna untuk melakukan validasi form pada sisi client. Validasi pada sisi client dilakukan karena cara ini lebih ringan dalam artian tidak membebani server karena memang tidak ada request ke server.
Untuk membuat jquery validation ini kita membutuhkan sebuah file core jquery dan sebuah file plugin validationnya yang kita letakkan pada bagian head dari halaman Html kita (file dapat didownload pada link diatas).

Sekarang kita buat terlebih dahulu form Html yang mau kita berikan validasi menggunakan jQuery Validation.

Perhatikan pada baris 6 dan 7 yang tersorot. Pada setiap input yang akan kita cek validitasnya kita tambahkan class=”required”. Kita juga perlu menambahkan label yang mengacu pada elemen input yang berfungsi untuk menampilkan pesan error.

Berikut ini adalah script untuk melakukan validasi pada form

Dimana formMahasiswa adalah form diatas tadi yang akan kita buat validasinya.

Tambahkan css berikut supaya pesan error berwarna merah

Jika field input masih kosong dan kita tekan tombol submit maka akan muncul peringatan error berwarna merah.

jQuery Validation

Pesan error diatas masih default, kita bisa melakukan kustomisasi dengan menambahkan attribute title pada elemen input

validasi custom

Plugin jquery validation ini dapat digunakan untuk segala jenis input seperti checkbox, text area, select dan lain-lain. Kita bisa juga melakukan validasi yang lebih kompleks seperti mengharusakn input memiliki panjang karakter 5-10, input harus email, input harus berupa Url.
Trik-trik tersebut akan saya bahas pada artikel berikutnya.. santai saja pasti akan saya share

Link Demo dan Download Tutorial jQuery Validation

Demo dapat dicoba disini
File proyek dapat didownload disini

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

3 thoughts on “Validasi Form Menggunakan jQuery Validation Plugin

Leave a Reply

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