Validasi dengan jquery Validation Plugin

01:19AM May 15, 2011 in category Tutorial by iftakhul anwar

Validasi adalah sebuah aktivitas untuk memeriksa apakah object atau kegiatan
yang dilakukan benar atau tidak.Jika valid, maka proses akan dilanjutkan, sebaliknya jika tidak maka proses akan dihentikan.

Sebagai contoh saat kita melakukan registrasi di sebuah layanan email seperti yahoo, gmail atau lainnya, saat kita menginputkan data yang tidak benar, maka akan ada sebuah notifikasi bahwa value yang kita inputkan salah atau kurang memenuhi syarat.




Kali ini kita akan mencoba sebuah plugin dari jquery yang cukup membantu kita dalam pembuatan sebuah form  validasi.
Componen yang kita butuhkan yang pertama adalah jquery plugin dan jquery validation plugin.


Cara menggunakannya cukup mudah, yaitu kita harus memanggil script jquery dan jquery plugin di dalam kode html kita dengan cara

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



Masukkan function dari jquery untuk validasinya 

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

Dalam hal ini "userForm" adalah form yang valuenya akan kita validasi.

Selanjutnya pada form inputan dengan id="userForm" tambahkan class="required"

<tr>
 <td>Nama</td>
 <td><input type="text" name="nama" class="required" /></td>
</tr>


Jika pada form yang kita beri class="required" valuenya kosong maka akan muncul notifikasi untuk mengisi form tersebut.

 

 

Jika kita ingin memberikan pesan khusus sebagai notifikasinya, kita dapat menambahkan taq title pada form inputan tersebut.

<tr>
 <td>Pekerjaan</td>
 <td><input type="text" name="pekerjaan" class="required" title="Pekerjaan harus di isi"/></td>
</tr>

 

Jika value pada form kosong maka akan tampil notifikasi sesuai title yang kita masukkan di form htmlnya.

 


Semoga bermanfaat

Comments[0]

Comments:

Post a Comment:
  • HTML Syntax: Allowed