Validasi Form mudah dengan jQuery

Validasi merupakan hal yang harus perlu dimiliki oleh sebuah Aplikasi yang baik, namun terkadang seorang developer kesuiltan dalam membuat validasi sebuah inputan dalam form. Dalam tutorial kali ini penulis akan memberikan "jurus" mudah untuk memvalidasi sebuah form hanya menggunakan plugin dari jQuery.

contoh source code :

<!--  load file jquery  -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!-- load file plugin jquery validation -->
<script type='text/javascript' src='validasi.js'></script>

<form id="formku">

    Nama : <input name="username" class="required"><br>

    Umur : <input name="umur" class="required number"><br>

<input type="submit" value="Simpan">

</form>

<script>
// code jquery unutk validasi form berdasarkan id
$('#formku').validate();
</script>

Penjelasan :

 $('#formku').validate(); adalah code jQuery unutk memvalidasi form berdasarkan id formnya, jadi from harus diberi id ataupun class juga bisa namun code untuk validasinya tinggal mengganti #(pagar) menjadi .(titik)

selanjutnya yang harus diperhatikan adalah pemberian atribut class pada inputan dengan asumsi sbb :

1. class = "required" adalah inputan harus diisi.
2. class = "number" adalah inputan harus berupa angka.
3. class = "email" adalah inputan harus berupa email yang valid.

Untuk lainnya silahkan googling karena bisa dijadikan banyak fungsi validasi.

tambahkan script css untuk mempercantik pesan kesalahan :

form label.error{

display:inline;font:10px Tahoma,sans-serif;color:#ED7476;margin-left:5px

}
form input.error,form input.error:hover,form input.error:focus,form select.error,form textarea.error{

border:1px solid #ED7476;background:#FFEDED

}

untuk file lengkapnya bisa di download disini

Tweet