Free Ebook Tutorial from Rosihan Ari's Blog

Ebook Javascript | Ebook PHP | Ebook AJAX | Ebook CSS | Ebook FPDF | Ebook Wordpress | Ebook Java SE




Cara Validasi Form dengan JQuery


January 11th, 2013 | by rosihanari |


Jual kaos

Kali ini, di blog tutorial ini saya mencoba menuliskan artikel tentang JQuery. Artikel-artikel yang akan saya tulis nantinya membahas seputar plugin-plugin jQuery. Dalam artikel ini, saya akan membahas plugin JQuery untuk memvalidasi form. Dengan adanya plugin ini, seseorang yang melakukan input ke dalam sebuah form HTML akan mengetahui komponen mana dari form yang harus diisi karena akan muncul peringatan otomatis bahwa ada komponen yang belum diisi atau format isian yang salah misalnya email atau URL.

Untuk membuat validasi form dengan JQuery, pertama yang harus Anda siapkan adalah script core jQuery nya sendiri, serta script plugin validasi formnya (jquery.validate.js). Untuk mendownload kedua script, silakan mengklik masing-masing link.

Selanjutnya kita bikin contoh formnya seperti berikut ini:

contoh.html

<html>
  <head>
   <title>jQuery Validation</title>
   <script src="jquery.js"></script>
   <script src="jquery.validate.js"></script>
   <script>
       $(document).ready(function(){
           $("#formku").validate();
        });
   </script>

   <style type="text/css">
       label.error {
           color: red; padding-left: .5em;
       }
   </style>
  </head>
   <body>
     <form id="formku">
       <table border="0">
          <tr><td>Nama Anda</td><td>:</td><td><input name="nama" class="required" minlength="3" /></td></tr>
          <tr><td>Email Anda</td><td>:</td><td><input name="email" class="required email" /></td></tr>
          <tr><td>Usia Anda</td><td>:</td><td><input name="usia" class="required number" /></td></tr>
          <tr><td>Tanggal Lahir Anda</td><td>:</td><td><input name="tgl" class="required date" /></td></tr>
          <tr><td>URL Anda</td><td>:</td><td><input name="url" class="required url" /></td></tr>
          <tr><td>Alamat Anda</td><td>:</td><td><input name="alamat" /></td></tr>
          <tr valign="top"><td>Komentar Anda</td><td>:</td><td><textarea name="komentar" class="required" /></textarea></td></tr>
       </table>
       <p>
       <input class="submit" type="submit" value="Submit"/>
       </p>
     </form>
   </body>
</html>

Setelah form contoh seperti di atas dibuat, jangan lupa meletakkan script jquery.js dan jquery.validate.js nya di satu folder yang sama dengan form tersebut, atau di folder manapun terserah asal path nya disesuaikan pada bagian

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>

Selanjutnya perhatikan id formnya, dalam contoh di atas adalah ‘formku’. Pastikan id formnya sama pada bagian

$("#formku").validate();

Dalam contoh form di atas saya sengaja membuat beberapa jenis isian, mulai dari teks, tanggal URL, email dan angka. Berikut ini maksud beberapa properti yang ada dalam tiap komponen form.

  • Properti class="required" artinya bahwa komponen tersebut harus diisi dengan format apapun.
  • Properti class="required email" artinya komponen harus diisi dan harus menggunakan format email.
  • Properti class="required number", komponen harus diisi menggunakan format angka.
  • Properti class="required date", komponen harus diisi menggunakan format tanggal DD/YY/YYYY
  • Properti class="required url", komponen harus diisi menggunakan format URL.
  • Properti minlength="3", maksudnya minimal jumlah karakter yang harus diisi adalah 3 karakter.

Kemudian dalam html di atas juga ada CSS seperti berikut:

<style type="text/css">
       label.error {
           color: red; padding-left: .5em;
       }
</style>

CSS tersebut digunakan untuk mengatur tampilan peringatan yang muncul jika isian form tidak sesuai dengan format yang diharapkan. Berikut ini contoh tampilan form di atas setelah diberikan jQuery untuk validasi.

Form validation.

Oya, Anda bisa juga mengubah pesan errornya sendiri. Silakan edit file jquery.validate.js nya, dan cari bagian ini:

messages: {
   required: "Field ini perlu diisi.",
   remote: "Please fix this field.",
   email: "Isikan email yang valid.",
   url: "Isikan URL yang valid.",
   date: "Isikan tanggal yang valid.",
   dateISO: "Please enter a valid date (ISO).",
   number: "Isikan angka yang valid.",
   digits: "Please enter only digits.",
   creditcard: "Please enter a valid credit card number.",
   equalTo: "Please enter the same value again.",
   maxlength: $.validator.format("Jumlah maksimal {0} karakter."),
   minlength: $.validator.format("Jumlah minimal {0} karakter."),
   rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
   range: $.validator.format("Please enter a value between {0} and {1}."),
   max: $.validator.format("Please enter a value less than or equal to {0}."),
   min: $.validator.format("Please enter a value greater than or equal to {0}.")
}

Selamat mencoba ya…


Kata kunci: form validasi - jquery tutorial - script jquery -


 

Komentar Anda ...