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>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?
<script type="text/javascript" src="includefile/jquery.validate.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#myForm").validate({
})
</script>
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">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.
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>
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: {Lalu penggunaannya pada form adalah sebagai berikut :
required: "E-mail harus diisi",
email: "Masukkan E-mail yang valid"
}
<input name="email" id="email" class="required email" size="30" type="text" />Selamat mencoba
0 comments:
Post a Comment