Validasi Pada Form dengan JQuery

Membuat sebuah validasi form dengan menggunakan jquery merupakan apa yang akan saya tuliskan pada tutorial kali ini. JQuery merupakan tehnologi yang mulai banyak digunakan pada saat ini dalam membuat sebuah situs web.

Untuk membuat sebuah validasi pada form dengan menggunakan JQuery maka anda terlebih dahulu harus memiliki file JQuery dan plugin JQuery Validation yang dibutuhkan (anda bisa mendapatkannya pada file contoh yang akan diterapkan pada tutorial ini).

Letakanlah file JQuery pada sebuah folder dalam kasus ini saya meletakan filenya pada folder JQuery.
Selanjutnya kita integrasikan dengan website kita dengan cara menambahkan kode berikut ini setelah <head> dan sebelum </head> pada index website anda :

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

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

<script type="text/javascript">

$(document).ready(function() {

$("#myForm").validate();

})

</script>

Setelah mengintegrasikannya tahap implementasinya pada sebuah form yaitu cukup dengan menambahkan id='myForm' pada form anda kemudian tambahkan class='required' title='eror yang akan ditampilkan' pada object textfield yang akan anda lakukan validasi padanya. Contohnya bisa anda lihat pada script berikut ini :

<form name="form1" method="post" id="myForm">
<table width="581" border="0">
<tr>
<td width="105">Nim</td>
<td width="7">:</td>
<td width="455"><label>
<input name="txtnim" type="text" id="txtnim" size="15" maxlength="8" class="required" title="Nim tidak boleh kosong"/>
</label></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><label>
<input name="txtnama" type="text" id="txtnama" size="30" maxlength="30" class="required" title="Nama tidak boleh kosong"/>
</label></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><label>
<input name="txtalamat" type="text" size="50" id="txtalamat" class="required" title="Alamat tidak boleh kosong"></textarea>
</label></td>
</tr>
<tr>
<td>Telp</td>
<td>:</td>
<td><label>
<input name="txttelp" type="text" id="txttelp" size="20" maxlength="13" class="required" title="Telphone tidak boleh kosong"/>
</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input type="submit" name="Submit" value="Submit" />
</label>
<label>
<input name="Reset" type="reset" id="Reset" value="Reset" />
</label></td>
</tr>
</table>
</form>