Validasi Form Menggunakan jQuery Validation Plugin

jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head) :

1
2

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

Ketikkan script validate nya:

1
2
3
4
5

<script type="text/javascript">
$(document).ready(function() {
	$("#myForm").validate();
})
</script>

Di mana myForm adalah id dari form yg akan divalidasi.

1

<form id="myForm" method="post">

Kemudian di bagian input yg akan kita beri validasi tambahkan class=”required”

1
2
3
4

Nama:
<input type="text" name="nama" class="required" />
Alamat:
<input type="text" name="alamat" class="required" />

Jika field masih kosong, kemudian kita tekan tombol submit, maka akan muncul peringatan bahwa field tsb harus diisi, dan form tidak akan di submit.

Pesan yang muncul di sebelah kanan input “This field is required.” itu adalah pesan default. Pesan tersebut bisa kita ganti dengan menambahkan attribute title di input, misalnya:

1

<input type="text" name="nama" class="required" title="Nama harus diisi" />

Maka pesan akan berganti menjadi pesan anda sendiri.

Validasi menggunakan jQuery Validation Plugin juga bisa diterapkan di semua jenis input, seperti radio button, checkbox, textarea, select option, dan lain-lain. Anda juga bisa menambahkan validasi yang lebih kompleks, seperti pengecekan alamat email, pengecekan URL, pengecekan jumlah minimal & maksimal karakter, pengecekan jenis file yang akan di upload, dan lain-lain.

Demo Validasi Form

Anda bisa mendownload source code nya di sini:
jQuery Validation (19297 downloads)

CATATAN: Validasi form menggunakan javascript/jQuery hanya berguna untuk mempermudah proses pengisian form, namun tidak akan melindungi aplikasi web anda. Untuk keamanan yang lebih baik, anda tetap harus menambahkan validasi secara server-side.