jQuery Talk: Form Validation(with Validation Plug-in)

Biasanya kita membuat script sendiri untuk memvalidasi sebuah email atau form yang lain, namun sekarang kita tak perlu berpusing-pusing untuk memikirkan String Verification semuanya itu telah di provide oleh sebuah Plugin jQuery. Plugin jQuery ini dinamakan jQuery validation plug-in dengan nomer versi yang akan saya bahas adalah v1.2.1de.

Download jQuery validation plug-in v1.2.1de.

Memvalidasi E-mail atau tipe inputan lain seperti text, option, password dll dngan menggunakan jQuery Plugin ternyata tidak sesulit yang saya bayangkan. Ini sangatlah mudah. Yang perlu kita ketahui dalam penggunaan Plugin ini adalah:

1. Deklarasikan alamat Plugin

Deklarasikan alamat Plugin dan alamat library jquery di bagian Head HTML seperti ini:

<script src=”js/jquery.easing.1.3.js” type=”text/javascript”></script>

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

2. Tambahkan CSS code

Tambahkan code css berikut pada file css anda.

input.error, select.error {
border: 1px solid red;
}
label.error {
color:red; margin-left: 10px;
}

Code css diatas berguna saat ada inputan yang tidak diisi dan inputan itu bersifat wajib(required), maka border field dan message alertnya akan berubah warna menjadi merah. Message Alert akan dijelaskan dibagian bawah.
Contoh gambar bentuk awal form :

Contoh gambar form yang sudah di-submit tetapi belum diisi:

Terlihat pada bagian diatas terdapat message alert, karna user tidak mengisi field yang wajib diisi.

3. Mengubah Atribut Kelas

Setelah kita membuat Form yang akan kita validasi, yang perlu kita lakukan adalah mengubah atribut class menjadi “required” untuk setiap inputan yang wajib diisi oleh user, contoh:

<input name=”firstname” class=”required” size=”50″ type=”text” />

4. Membuat Pesan Kesalahan

Mengisi atribut title pada setiap inputan yang mempunyai class=”required”, title disini berfungsi sebagai message alert yang akan timbul ketika user lupa mengisi inputan ini. Message ini berada disebelah kanan field tersebut. Jika tidak diisi maka message alert default yang akan timbul adalah “This field is required.”, contoh:

<input name=”first” class=”required” title=”First name is required” size=”50″ type=”text” />

Contoh perubahan message alert ketika title disertakan:

5. Setting untuk Opotion Button

Untuk tipe inputan option, pastikan bahwa anda menyertakan class dan title hanya pada bagian awal select bukan pada tiap optionnya, contoh :

<select class=”required” title=”Month is required” name=”month”>

6. Setting untuk Inputan Email

Untuk tipe inputan E-mail, class yang digunakan adalah “required email”, contoh:

<input size=”50″ type=”text” class=”required email” name=”email” />

7. Tambahakan JavaScript berikut untuk email verification

Khusus untuk tipe inputan E-mail, tidak memerlukan atribut title lagi. Karena message alert untuk E-mail tidak mengambil dari nilai attribute Title namun dengan mensertakan beberapa code jQuery berikut :

<script type=”text/javascript”>
$(document).ready(function() {
$(“#signupform”).validate(
{
messages: {
email: {
required: “E-mail is required”,
email: “E-mail does not valid”
}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent(“td”));
}
});
})
</script>

Cukup jelas terlihat diatas bahwa ketika field e-mail tidak diisi maka message alert akan mengambil value dari “required” dan ketika e-mail diisi tetapi tidak valid maka message alert akan mengambil value dari “email”. Anda cukup mengganti dua nilai diatas saja yaitu required dan email, dan biarkan code yang lain tetap seperti itu.

Contoh gambar ketika field E-mail tidak diisi dengan valid:

8. Setting untuk Radio Button

Untuk tipe inputan Radio Button, “class” dan “title” cukup disertakan disalah satu inputan.

<input type=”radio” name=”gender” class=”required” title=”Gender is required” value=”L” />Male
<input type=”radio” name=”gender” value=”P” />Female

Ketika semua data sudah valid maka form akan bersih seperti ini :

Untuk lebih memudahkan pembelajaran silahkan download contoh source codenya disini. Untuk melihat langsung contoh penggunaan Plug-in ini, silahkan berkunjung ke http://dlocca.coolpage.biz/ , masuk kedalam page “Sign Up” untuk mencoba mengisi form seperti gambar diatas.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

2 thoughts on “jQuery Talk: Form Validation(with Validation Plug-in)

  1. saya ada tugas begini pakai PHP,,tapi soalnya kalau inputnya salah warna text field backgroundnya warna merah, kalau inputnya betul background text field nya warna hijau, gimana itu mas..apa bisa bantu..?

    • maaf gan baru bales…
      ini contoh script’a klo suatu textField di hover dan di blur….

      $(document).ready(function(){
      $(“.required”).mouseover(function() {
      var string = $(this).attr(“style”);
      $(this).attr({ style: “background: #f00;” });
      })
      .mouseout(function() {
      $(this).attr({ style: “background: #fff;” });
      });
      });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s