Menambahkan Rule Pada JQuery Validation

17 September 2010

Pada artikel saya terdahulu yang berjudul Validasi Pada Form dengan JQuery dijelaskan bagaimana sebuah form dapat melakukan validasi terlebih dahulu sebelum form tersebut disubmit. Dalam artikel ini akan dijelaskan bagaimana menambahkan rule pada jquery validation untuk melakukan Validasi Pada Form dengan JQuery

Dokumentasi dari JQuery Validation Plugin sendiri bisa anda lihat pada link berikut ini :
http://docs.jquery.com/Plugins/Validation/Validator#Options_for_the_validate.28.29_method

Pada artikel sebelumnya untuk melakukan validasi pada sebuah form kita hanya perlu menempatkan script berikut ini diantara <head> dan </head> :

<script type="text/javascript" src="includefile/jquery.js"></script>
<script type="text/javascript" src="includefile/jquery.validate.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
  jQuery("#myForm").validate({
  })
</script>
Sebenarnya dengan hanya menambahkan script tersebut diantara  <head> dan </head> anda sudah dapat melakukan validasi terhadap sebuah form. Tapi bagaimana bila anda ingin memvalidasi jika suatu field pada sebuah form hanya boleh angka, memvalidasi apakah penulisan sebuah email valid, dll?
Untuk melakukan hal tersebut anda perlu menambahkan rule pada jquery validation. Lalu bagaimanakah caranya untuk menambahkan rulenya? Berikut langkahnya :
Dalam kasus ini saya memberikan contoh apabila kita menginput nomor telepon field nomor telepon pada form hanya akan menerima input dalam bentuk angka dan dibatasi sebanyak 13 digit angka saja.
Berikut scriptnya :

<script type="text/javascript">
  jQuery(document).ready(function() {
jQuery("#myForm").validate({
rules: {
txttelp: {
maxlength: 13,
number: true
}
},
messages: {
txttelp: {
maxlength: jQuery.format("Maksimal {0} angka"),
number: "Hanya boleh angka"
}
}
});
})
</script>
Terlihat dari script diatas tidak jauh berbeda dengan script sebelumnya hanya terdapat penambahan rule dan message. rule merupakan aturan yang diterapkan pada form saat melakukan validasi sedangkan message merupakan pesan yang akan ditampilkan saat terjadi kesalahan penginputan.
Selain terdapat penambahan rule dan message dalam penggunaan pada formpun ada sedikit perbedaan bila pada contoh sebelumnya scriptnya seperti berikut ini :
<input name="txttelp" type="text" id="txttelp"   size="20" maxlength="13" class="required" title="Telphone tidak boleh   kosong"/>
Setelah anda menambahkan rule dan messagenya maka penggunaannya adalah sebagai berikut :
<input id='txttelp' name='txttelp' type='text' size='20'>
Lalu bagaimana caranya untuk memvalidasi penginputan email?
Khusus untuk memvalidasi penginputan email cukup menambahkan script berikut ini pada message karena rule untuk email ini sendiri sudah terdapat pada plugin sehingga kita hanya perlu untuk menambahkan messagenya saja :
email: {
required: "E-mail harus diisi",
email: "Masukkan E-mail yang valid"
}
Lalu penggunaannya pada form adalah sebagai berikut :
<input name="email" id="email" class="required email" size="30" type="text" />
Selamat mencoba Menambahkan Rule Pada JQuery ValidationSocialTwist Tell-a-Friend

0 comments:

Post a Comment

Artikel Lain

 
 
 

Go To Link

  »  A1VBCode
  »  Bina Sarana Informatika
  »  Blogger
  »  Deconstruction Code
  »  Diskusiweb
  »  dremi.info
  »  Echo
  »  Facebook
  »  Gary Abraham
  »  Ilmu Website
  »  JQuery
  »  Mahesajenar Widget
  »  STMIK Nusa Mandiri
  »  OOM Blog
  »  Planet Source Code
  »  Rahma Blog
  »  Terren Jr
  »  VB-Bego
  »  Herry Blog

Advertisement