jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head):
Mari kita mulai dengan contoh sederhana. Klik disini untuk melihat demo. Bentuk demonstrasi tersebut berisi empat bidang: nama, e-mail, komentar dan URL. Seperti yang Anda lihat, pertama tiga bidang yang diperlukan, sedangkan bidang URL adalah opsional. Jika Anda mengirimkan formulir tanpa mengisi kolom yang diperlukan, Anda akan menerima pesan kesalahan.

Berikut adalah kode yang digunakan untuk bentuk dalam demonstrasi di atas. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#form1").validate({
        rules: {
          name: "required",// simple rule, converted to {required:true}
          email: {// compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>
  <style type="text/css">
    * { font-family: Verdana; font-size: 11px; line-height: 14px; }
    .submit { margin-left: 125px; margin-top: 10px;}
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
    .form-row { padding: 5px 0; clear: both; width: 700px; }
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
    input[type=text], textarea { width: 250px; float: left; }
    textarea { height: 50px; }
  </style>
  </head>
  <body>
    <form id="form1" method="post" action="">
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div>
      <div class="form-row"><input class="submit" type="submit" value="Submit"></div>
    </form>
  </body>
</html>
Kode tersebut diatas cukup mudah dan tidak perlu banyak penjelasan. Namun, ada beberapa poin penting yang harus di perhatian yaitu:
  • Harus selalu menyertakan pustaka jQuery dan plugin validasi bassistance, di bagian head.
  • Selalu menetapkan atribut id dari bentuk dan atribut name semua field yang ingin divalidasi.
Selanjutnya kita lihat fungsi validate() secara rinci. 
$(document).ready(function() {
  $("#form1").validate({
    rules: {
      name: "required",    // simple rule, converted to {required: true}
      email: {             // compound rule
      required: true,
      email: true
      },
      url: {
        url: true
      },
      comment: {
        required: true
      }
    },
    messages: {
      comment: "Please enter a comment."
    }
  });
});
Yang kita lakukan adalah menginisialisasi form validasi menggunakan fungsi validate(). Ada beberapa parameter yang bisa kita gunakan. Dalam contoh di atas, kita hanya menggunakan dua diantaranya, untuk melihat daftar pilihan fungsi validate() silahkan klik di sini.

Dua parameter kita digunakan adalah:
  • rules: memungkinkan Anda untuk menentukan field yang akan divalidasi. Dalam kasus ini, kita memvalidasi nama, email, url dan komentar. Untuk setiap field, kita bisa menentukan bahwa data diperlukan untuk suatu field (required: true). Kita bisa pula menentukan bahwa suatu data adalah berupa alamat e-mail yang valid, URL yang valid, dll.
  • messages: memungkinkan Anda untuk menentukan pesan kesalahan untuk field tertentu (seperti kolom komentar dalam contoh di atas). Jika Anda tidak menentukannya, maka pesan default yang akan ditampilkan "this field is required".