Blog'e Dias

Dalam postingn kali ini saya akan menjelaskan bagaimana caranya memfalidasi form.

Dengan mengunakan jquery plugin form validation , kita dapat langsung memunculkan error apabila data yang kita masukkan salah atau kosong, semisal ada sebuah inputan yang harus di isi, jika kita tidak mengisikannya maka akan langsung tampil error, dan juga bisa digunakan untuk memfalidasi alamat email,

Langkah yang pertama download javascript plugin,

1. jquery-latest.js

2. jquery.validate.js

Nah setelah mendownload file di atas, di sini saya contohkan kedua file tersebut saya taruh di folder /js

Kemudian import file js tadi ke dalam file html.

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

dan tambahkan kode css berikut ini

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

kemudian tambahkan sedikit code javascript di bawah ini untuk mengenalkan form yang akan di falidasikan.

<script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
</script>

maksud dari ?#commentForm? di atas adalah id dari form yang akan di beri validasi.

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>Comment Form</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

untuk memberikan validasi di setiap inputan jika input nya tidak boleh kosong maka di input classnya adalah ?required? dan untuk inputan berupa email maka input classnya adalah ?required email? Seperti contoh di atas,

dan ini hasilnya :D

hehehe mudah bukan? :D selamat mencoba!