Validate Form with Jquery

By Posted on

Masih ingat dengan artikel saya sebelumnya yaitu validasi javascript. Nah jika sebelumnya kita harus membuat validasi ini sebanyak form yang kita miliki, maka beberapa waktu lalu saya berfikir mau mencari cara memvalidasi form yang saya miliki dengan satu function saja. Akhirnya Jquery lah jawabannya.

Jquery sendiri sebenarnya adalah sebuah library javascript yang memungkinkan kita untuk membuat program web dengan memanfaatkan library javascript yang disediakan (didalam jquery), tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut.

JQuery merupakan salah satu library yang membuat program web di sisi klien (Client Side), tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut. (Seperti yang saya lakukan saat membuat validasi javascript sebelumnya).

Oke, intinya dengan Jquery ini saya akan membuat proses validasi (validate) pada program yang akan saya buat menjadi lebih sederhana. Saya hanya mendefinisikan 1 kali dan selanjutnya akan saya panggil pada form-form yang saya miliki. (Betapa mudah & sederhananya bukan…)

Dalam contoh ini saya menggunakan plugins validate jquery yang dapat didownload langsung dari websitenya

http://bassistance.de/jquery-plugins/jquery-plugin-validation

Didalam file index.php atau tergantu dalam file utama program web kita, sisipkan script berikut ini untuk me-load jquery dan plugins jquery validate dan letakkan di bagian head.

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

Selanjutnya buat script validasinya

<script type="text/javascript" language="JavaScript">// <![CDATA[
	$(document).ready(function() {
		$("#myform").validate();
	})
// ]]></script>

Catatan : $(“#myform”) adalah id form yang akan kita validasi.

Contohnya adalah sebagai berikut

<form id="myform" action="proses.php" method="POST"></form>Contoh form yang akan divalidasi
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" language="JavaScript">// <![CDATA[
	$(document).ready(function() {
		$("#myform").validate();
	})

// ]]></script>
<h2>Add New User</h2>
<form id="myform" action="proses.php" method="POST">
<table class="data">
<tbody>
<tr>
<td class="ldata">Username</td>
<td class="data">: <input class="required" type="text" name="id_user" /> *</td>
</tr>
<tr>
<td class="ldata">Password</td>
<td class="data">: <input class="required" type="password" name="password" /> *</td>
</tr>
<tr>
<td class="ldata">Full Name</td>
<td class="data">: <input type="text" name="full_name" size="30" /></td>
</tr>
<tr>
<td class="ldata">E-mail</td>
<td class="data">: <input type="text" name="email" size="30" /></td>
</tr>
<tr>
<td class="ldata">Level</td>
<td class="data">: <input type="radio" name="level" value="1" />Full Control <input type="radio" name="level" value="2" />Write &amp; Delete (Except Manage User) <input type="radio" name="level" value="3" checked="checked" />Read Only</td>
</tr>
<tr>
<td class="data" colspan="2"><input type="submit" value="Save" /> <input onclick="self.history.back()" type="button" value="Abort" /></td>
</tr>
</tbody>
</table>
</form>

Untuk memvalidasi field tertentu kita dapat mensisipkan class=”required” agar pada saat tombol submit (Save) diklik maka jquery validate akan memvalidasi field tersebut. Jika field tersebut bernilai kosong makan warning berwarna merah akan dimunculkan dan memberitahukan bahwa field tersebut harus diisi.

untuk meng-kostumisasi pesan warningnya, dapat disisipkan pada field seprti dibawah ini

<input class="required" title="username harus diisi" type="text" name="id_user" />

Proses validasi dengan plugins jquery validate ini dapat digunakan pada semua jenis element form seperti radio button, checkbox, textarea, select option, dan lain-lain. Anda juga bisa mengembangkannya lebih lanjut untuk memvalidasi hal-hal yang lebih kompleks, seperti validasi alamat email, validasi alamat URL, validasi jumlah minimal & maksimal karakter, validasi jenis file yang akan di upload, dan lain sebagainya. Untuk itu Anda dapat membaca manual/dokumentasi pada web resminya.

Semoga bermanfaat.

Related posts: