Membuat Validasi Form dengan JQuery Validation

					Membuat Validasi Form dengan JQuery Validation | Achmatim.Net



      Membuat Validasi Form dengan
           JQuery Validation
                        Tutorial ini ditulis oleh Achmad Solichin
        dan sudah dipublikasikan di http://achmatim.net pada tanggal 22 Mei 2012


Apa pentingnya sebuah validasi pada suatu form inputan? Pastinya sangat penting.
Beberapa alasan mengapa validasi itu penting untuk dilakukan saat membuat inputan
apalagi inputan di suatu halaman web adalah, pertama, tidak semua pengunjung memiliki
pemahaman yang sama saat mengisi suatu form. Kasarnya, tidak semua pengunjung
berhati mulia untuk mengisi form secara benar dan wajar. Ada saja pengunjung yang coba-
coba. Untuk mengantisipasi hal tersebut tentu inputan harus dibatasi. Saya sering
mencontohkan bahwa validasi juga dilakukan di sekitar kita, seperti pada mesin ATM
dimana tempat memasukkan kartu dibuat tepat sesuai ukuran kartu ATM pada umumnya,
mengapa tidak dibuat yang besar aja agar gampang masukin kartu ATM? Sederhana saja,
kalo dibuat lubang yang terlalu besar, saya yakin akan sering ditemukan sendal jepit yang
masuk ke sana :)




Alasan kedua mengapa perlu adanya validasi adalah untuk menjamin bahwa data yang
diproses atau disimpan memiliki format yang seragam (standar). Sebagai contoh, inputan
berupa tanggal lahir harus tersimpan dengan format yang sama misalnya tanggal-bulan-
tahun atau tahun-bulan-tanggal, sehingga setiap data yang masuk harus memenuhi format
standar tersebut. Oleh karena itu, sebelum menyimpan data tanggal lahir harus dipastikan
(divalidasi) bahwa data yang diinputkan adalah benar dan sesuai dengan format. Alasan
ketiga mengapa perlu validasi adalah untuk menjamin keamanan (security) dari aplikasi
web kita. Jangan sampai kelemahan validasi dalam suatu inputan dimanfaatkan oleh orang

                                                                        Halaman 1 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

yang tidak bertanggung jawab (seperti cracker) untuk menyusup ke aplikasi kita, misalnya
melalui celah SQL Injection.

Kenyamanan pengguna (user satisfication) merupakan alasan lainnya mengapa perlu
validasi. User adalah manusia biasa yang tidak luput dari kesalahan, misalnya dalam
menginput alamat email bisa saja lupa tanda @, atau dalam inputan jumlah produk yang
akan dibeli bisa aja user salah menginput dengan selain angka positif. Dengan validasi,
dapat meningkatkan kenyamanan user dalam mengisi form inputan, apalagi jika inputan
disertai informasi kesalahan inputan (notifikasi) yang jelas.

Dari sisi letaknya, validasi dapat dibagi menjadi dua, yaitu validasi di sisi server dan
validasi di sisi client. Validasi di sisi server biasanya dilakukan setelah form di-submit
(dikirim) dan menggunakan bahasa pemrograman sisi server seperti PHP, JSP dan ASP.
Sedangkan validasi di sisi client dapat dilakukan sebelum data dari form inputan dikirim ke
server. Validasi di client umumnya dilakukan dengan Javascript dan atribut HTML. Pada
tutorial jquery kali ini, akan dijelaskan step by step bagaimana melakukan validasi form
di sisi client dengan menggunakan library javascript JQuery dan plugin JQuery Validation.


Berikut ini step by step membuat validasi form dengan JQuery Validation.


#1. Siapkan form inputan yang akan divalidasi
Sebagai contoh form inputan sederhana, buatlah dengan HTML form berikut ini:




                                                                           Halaman 2 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net




                       Gambar 1: Form Inputan yang akan divalidasi

Untuk membuat form inputan diatas, berikut ini script HTML-nya. Ketik dan simpan dalam
file berekstensi .html. Action dari form arahkan ke halaman proses.php.

Contoh Program Membuat Form Inputan yang Akan Divalidasi
 1   <html>
 2        <head>
 3              <title>Validasi Form dengan JQuery Validation -
     Achmatim.Net</title>
 4              <style type="text/css">
 5              .labelfrm {
 6                   display:block;
 7                   font-size:small;


                                                                     Halaman 3 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

  8                   margin-top:5px;
  9              } .error { font-size:small; color:red; }
 10              </style>
 11        </head>
 12        <body>
 13              <h1>Input Data Mahasiswa</h1>
 14              <form action="proses.php" method="post" id="frm-mhs">
 15                   <label for="nim" class="labelfrm">NIM: </label>
 16                   <input type="text" name="nim" id="nim" maxlength="10"
      size="15"/>
 17
 18                   <label for="nama" class="labelfrm">NAMA: </label>
 19                   <input type="text" name="nama" id="nama" size="30"/>
 20
 21                   <label for="alamat" class="labelfrm">ALAMAT: </label>
 22                   <textarea name="alamat" id="alamat" cols="40"
      rows="4"></textarea>
 23
 24                   <label for="tgl" class="labelfrm">TANGGAL LAHIR:
      </label>
 25                   <input type="text" name="tgl" id="tgl" maxlength="10"
      size="15"/>
 26
 27                   <label for="umur" class="labelfrm">UMUR: </label>
 28                   <input type="text" name="umur" id="umur" maxlength="3"
      size="7"/>
 29
 30                   <label for="email" class="labelfrm">ALAMAT EMAIL:
      </label>
 31                   <input type="text" name="email" id="email" size="50"/>
 32
 33                   <label for="situs" class="labelfrm">ALAMAT SITUS:
      </label>
 34                   <input type="text" name="situs" id="situs" size="50"/>
 35
 36                   <label for="pass1" class="labelfrm">PASSWORD: </label>
 37                   <input type="password" name="pass1" id="pass1"
      size="15"/>
 38
 39                   <label for="pass2" class="labelfrm">ULANGI PASSWORD:
      </label>
 40                   <input type="password" name="pass2" id="pass2"
      size="15"/>
 41
 42                <label for="submit" class="labelfrm">&nbsp;</label>
 43                <input type="submit" name="Submit" value="Submit"/>
 44           </form>
 45      </body>
 46 </html>


                                                                Halaman 4 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net



#2. Sertakan library JQuery dan Plugin JQuery Validation
Library yang diperlukan ada 2 (dua) yaitu library core JQuery yang dapat didownload di situs
http://code.jquery.com dan plugin JQuery Validation yang dapat didownload dari situs
resminya      di    http://bassistance.de/jquery-plugins/jquery-plugin-validation/.  Untuk
menyertakan library tersebut ke dalam form yang sudah kita buat sebelumnya, tambahkan
dua baris perintah berikut ini di antara tag <head> (diasumsikan bahwa kedua plugin
tersimpan di folder /jquery).

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



#3. Tentukan aturan / rule validasi
Selanjutnya yang harus dilakukan adalah membuat aturan atau rule validasi. Hal ini penting
untuk dilakukan sebelum menerapkan aturan tersebut ke dalam suatu form. Berikut ini
beberapa contoh aturan yang akan saya terapkan terhadap form di atas:

     1.    Semua field inputan yang harus diisi (required)
     2.    Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf)
     3.    Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
     4.    Inputan UMUR diisi dengan angka antara 0-100
     5.    Inputan ALAMAT EMAIL diisi dengan format penulisan email.
     6.    Inputan ALAMAT SITUS diisi dengan format penulisan situs.
     7.    Inputan PASSWORD dan ULANGI PASSWORD harus sama.

#4. Terapkan aturan / rule validasi
Untuk menerapkan aturan / rules validasi yang telah kita tentukan, panggil fungsi validate()
saat halaman pertama kali dimunculkan. Di dalam fungsi validate() kita dapat membuat
aturan-aturan di atas. Sebagai langkah awal, tambahkan potongan script berikut ini di
antara tag <head>

Potongan Script untuk mengerapkan rule validasi
 1        <script type="text/javascript">
 2        $(document).ready(function() {
 3             $('#frm-mhs').validate();
 4        });
 5        </script>

Perhatikan potongan script di atas. Fungsi validate() harus diterapkan pada form, kita dapat
menggunakan selector ID seperti pada script di atas. #frm-mhs merupakan ID dari form

                                                                                Halaman 5 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

inputan yang sudah dibuat sebelumnya.

Selanjutnya kita akan menerapkan aturan validasi satu per satu.

Aturan 1: Semua field inputan yang harus diisi (required)
Untuk menerapkan aturan suatu inputan yang harus diisi (required), cara paling gampang
adalah dengan menambahkan class “required” pada setiap inputan yang akan dikenakan
aturan tersebut. Contohnya pada field NIM sebagai berikut.

<input type="text" name="nim" id="nim" maxlength="10" size="15"
class="required"/>

Lakukan hal yang sama untuk semua tag inputan.

Aturan 2: Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi
          huruf)
Untuk aturan yang kedua ini, dapat dirinci menjadi 3 rule yaitu tidak boleh huruf (digits),
panjang minimal isian adalah 10 digit dan panjang maksimal juga 10 digit. Kita dapat
menambahkan rule pada pemanggilan fungsi validate() sehingga berubah menjadi sebagai
berikut:

Pengaturan rule untuk inputan NIM
  1   $('#frm-mhs').validate({
  2        rules: {
  3              nim : {
  4                   digits: true,
  5                   minlength:10,
  6                   maxlength:10
  7              }
  8        }
  9   });



Aturan 3: Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
Untuk aturan yang ketiga yaitu mengenai format inputan tanggal lahir. Kita dapat
menggunakan rule bawaan date:true jika format yang diinginkan adalah MM/DD/YYYY atau
YYYY-MM-DD. Namun dalam rule diatas, diinginkan format tanggalnya adalah DD/MM/YYYY
sehingga kita perlu membuat fungsi validator sendiri.

Perhatikan fungsi indonesianDate() beserta penerapannya berikut ini:




                                                                         Halaman 6 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

Penambahan fungsi Validator untuk Format Tanggal
  1   $(document).ready(function() {
  2        $('#frm-mhs').validate({
  3              rules: {
  4                   nim : {
  5                        digits: true,
  6                        minlength:10,
  7                        maxlength:10
  8                   },
  9                   tgl: {
 10                        indonesianDate:true
 11                   }
 12              }
 13        });
 14   });
 15
 16   $.validator.addMethod(
 17        "indonesianDate",
 18        function(value, element) {
 19              // put your own logic here, this is just a (crappy) example
 20              return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
 21        },
 22        "Please enter a date in the format DD/MM/YYYY"
 23   );
                                                        referensi fungsi: stackeoverflow.


Aturan 4: Inputan UMUR diisi dengan angka antara 0-100
Untuk aturan ke-4, kita dapat menggunakan fungsi bawaan range serta batasan inputan
berupa angka (digits). Jadi, tambahkan rule untuk inputan umur.

Aturan untuk inputan UMUR
  1   umur: {
  2        digits: true,
  3        range: [0, 100]
  4   }



Aturan 5: Inputan ALAMAT EMAIL diisi dengan format penulisan email.
Untuk aturan yang ke-5, JQuery validation sudah menyediakan fungsi email. Dapat
ditambahkan langsung di tag inputannya (seperti aturan 1), atau ditambahkan rule email:
true.




                                                                      Halaman 7 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

Aturan 6: Inputan ALAMAT SITUS diisi dengan format penulisan situs.
Untuk aturan ke-6 juga sudah tersedia fungsinya, yaitu url, dan dapat ditambahkan di tag
inputan atau rule tersendiri.

Aturan 7: Inputan PASSWORD dan ULANGI PASSWORD harus sama.
Aturan yang terakhir terkait dengan validasi bahwa password harus sama antara 2 field
inputan. Untuk hal tersebut, sudah tersedia fungsi equalsTo. Rule validasi setelah
ditambahkan aturan 4, 5, 6 dan 7 adalah sbb:

Rule Validasi
  1   $('#frm-mhs').validate({
  2        rules: {
  3              nim : {
  4                   digits: true,
  5                   minlength:10,
  6                   maxlength:10
  7              },
  8              tgl: {
  9                   indonesianDate:true
 10              },
 11              umur: {
 12                   digits: true,
 13                   range: [0, 100]
 14              },
 15              email: {
 16                   email: true
 17              },
 18              situs: {
 19                   url: true
 20              },
 21              pass2: {
 22                   equalTo: "#pass1"
 23              }
 24        }
 25   });



#5. Mengganti Pesan Kesalahan
Salah satu kelebihan plugin JQuery Validation adalah kita dapat dengan mudah mengganti
pesan kesalahan yang akan ditampilkan jika aturan validasi tidak terpenuhi. Defaultnya
pesan kesalahan dalam bahasa inggris, kita dapat menggantinya dengan mudah dengan
menambahkan method messages. Berikut ini contohnya:




                                                                       Halaman 8 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

Mengatur Pesan Kesalahan
  1   $('#frm-mhs').validate({
  2        rules: {
  3              nim : {
  4                   digits: true,
  5                   minlength:10,
  6                   maxlength:10
  7              },
  8              tgl: {
  9                   indonesianDate:true
 10              },
 11              umur: {
 12                   digits: true,
 13                   range: [0, 100]
 14              },
 15              email: {
 16                   email: true
 17              },
 18              situs: {
 19                   url: true
 20              },
 21              pass2: {
 22                   equalTo: "#pass1"
 23              }
 24        },
 25        messages: {
 26              nim: {
 27                   required: "Kolom nim harus diisi",
 28                   minlength: "Kolom nim harus terdiri dari 10 digit",
 29                   maxlength: "Kolom nim harus terdiri dari 10 digit"
 30              },
 31              email: {
 32                   required: "Alamat email harus diisi",
 33                   email: "Format email tidak valid"
 34              },
 35              pass2: {
 36                   equalTo: "Password tidak sama"
 37              }
 38        }
 39   });




                                                                Halaman 9 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net




                       Gambar 2: Contoh Tampilan Hasil Validasi

Source Lengkap Validasi Form dengan JQuery Validation
 1  <html>
 2       <head>
 3             <title>Validasi Form dengan JQuery Validation -
    Achmatim.Net</title>
  4            <style type="text/css">
  5            .labelfrm {
  6                 display:block;
  7                 font-size:small;
  8                 margin-top:5px;
  9            }
 10            .error {


                                                                  Halaman 10 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

 11                  font-size:small;
 12                  color:red;
 13             }
 14             </style>
 15
 16            <script type="text/javascript"
    src="jquery/jquery.min.js"></script>
 17            <script type="text/javascript"
    src="jquery/jquery.validate.min.js"></script>
 18
 19            <script type="text/javascript">
 20            $(document).ready(function() {
 21                 $('#frm-mhs').validate({
 22                       rules: {
 23                            nim : {
 24                                  digits: true,
 25                                  minlength:10,
 26                                  maxlength:10
 27                            },
 28                            tgl: {
 29                                  indonesianDate:true
 30                            },
 31                            umur: {
 32                                  digits: true,
 33                                  range: [0, 100]
 34                            },
 35                            email: {
 36                                  email: true
 37                            },
 38                            situs: {
 39                                  url: true
 40                            },
 41                            pass2: {
 42                                  equalTo: "#pass1"
 43                            }
 44                       },
 45                       messages: {
 46                            nim: {
 47                                  required: "Kolom nim harus diisi",
 48                                  minlength: "Kolom nim harus terdiri
    dari 10 digit",
 49                                  maxlength: "Kolom nim harus terdiri
    dari 10 digit"
 50                            },
 51                            email: {
 52                                  required: "Alamat email harus diisi",
 53                                  email: "Format email tidak valid"
 54                            },
 55                            pass2: {


                                                                Halaman 11 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

 56                                   equalTo: "Password tidak sama"
 57                              }
 58                         }
 59                   });
 60             });
 61
 62            $.validator.addMethod(
 63                  "indonesianDate",
 64                  function(value, element) {
 65                       // put your own logic here, this is just a
    (crappy) example
 66                       return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
 67                  },
 68                  "Please enter a date in the format DD/MM/YYYY"
 69            );
 70            </script>
 71
 72      </head>
 73      <body>
 74            <h1>Input Data Mahasiswa</h1>
 75            <form action="proses.php" method="post" id="frm-mhs">
 76                  <label for="nim" class="labelfrm">NIM: </label>
 77                  <input type="text" name="nim" id="nim" maxlength="10"
    class="required" size="15"/>
 78
 79                  <label for="nama" class="labelfrm">NAMA: </label>
 80                  <input type="text" name="nama" id="nama" size="30"
    class="required"/>
 81
 82                  <label for="alamat" class="labelfrm">ALAMAT: </label>
 83                  <textarea name="alamat" id="alamat" cols="40" rows="4"
    class="required"></textarea>
 84
 85                  <label for="tgl" class="labelfrm">TANGGAL LAHIR:
    </label>
 86                  <input type="text" name="tgl" id="tgl" maxlength="10"
    size="15" class="required"/>
 87
 88                  <label for="umur" class="labelfrm">UMUR: </label>
 89                  <input type="text" name="umur" id="umur" maxlength="3"
    size="7" class="required"/>
 90
 91                  <label for="email" class="labelfrm">ALAMAT EMAIL:
    </label>
 92                  <input type="text" name="email" id="email" size="50"
    class="required"/>
 93
 94                  <label for="situs" class="labelfrm">ALAMAT SITUS:
    </label>


                                                                Halaman 12 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

    95                    <input type="text" name="situs" id="situs" size="50"
          class="required"/>
    96
    97                    <label for="pass1" class="labelfrm">PASSWORD: </label>
    98                    <input type="password" name="pass1" id="pass1"
          size="15" class="required"/>
     99
    100                     <label for="pass2" class="labelfrm">ULANGI PASSWORD:
          </label>
    101                   <input type="password" name="pass2" id="pass2"
          size="15" class="required"/>
    102
    103                <label for="submit" class="labelfrm">&nbsp;</label>
    104                <input type="submit" name="Submit" value="Submit"/>
    105           </form>
    106      </body>
    107 </html>



Demo dan Download
•     Tutorial ini juga dipublikasikan di http://achmatim.net/2012/05/22/membuat-validasi-
      form-dengan-jquery-validation
•     Demo program akhir dari tutorial ini dapat dilihat di http://achmatim.net/_demo/jquery-
      validation/
•     Download source code program lengkap beserta library JQuery di alamat
      http://achmatim.net/_downloads/jquery-validation.zip


Tentang Penulis
               Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas Teknologi
               Informasi, Universitas Budi Luhur, Jakarta (S1, 2005) dan Magister Teknologi
               Informasi, Universitas Indonesia (S2, 2010). Saat ini sedang menempuh
               program Doktoral dalam bidang Ilmu Komputer di Universitas Gadjah Mada,
               Jogjakarta. Kegiatan sehari-hari adalah sebagai Dosen di Universitas Budi
               Luhur (http://www.budiluhur.ac.id). Kegiatan lain aktif sebagai programmer,
               web developer, system analyst dan memberikan pelatihan di berbagai bidang
               komputer serta membuat tutorial-tutorial praktis di bidang komputer. Penulis
memiliki situs utama di http://achmatim.net yang berisi berbagai tutorial praktis di bidang
komputer serta menyediakan buku gratis komputer. Penulis dapat dihubungi melalui email
di achmatim@gmail.com, YM achmatim, Facebook achmatim dan Twitter @achmatim.




                                                                           Halaman 13 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

Lisensi Dokumen
Seluruh isi dalam dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara
bebas untuk tujuan pendidikan, pembelajaran dan bukan komersial ( non profit), dengan
syarat tidak menghilangkan, menghapus atau mengubah atribut penulis dokumen ini dan
pernyataan dalam lisensi dokumen yang disertakan di setiap dokumen. Tidak diperbolehkan
mengkomersialkan tutorial ini kecuali mendapatkan ijin terlebih dahulu dari penulis.




                                                                     Halaman 14 dari 14

				
DOCUMENT INFO
Shared By:
Stats:
views:541
posted:6/2/2012
language:Indonesian
pages:14
Description: Validasi form merupakan hal yang sangat penting untuk dilakukan. Beberapa alasannya antara lain untuk membatasi data masukan yang diinput oleh user, menjaga standarisasi data masukan, menjamin keamanan aplikasi dan meningkatkan kenyamanan pengguna. Dari sisi letaknya, validasi dapat dibagi menjadi dua, yaitu validasi di sisi server dan validasi di sisi client. Validasi di sisi server biasanya dilakukan setelah form di-submit (dikirim) dan menggunakan bahasa pemrograman sisi server seperti PHP, JSP dan ASP. Sedangkan validasi di sisi client dapat dilakukan sebelum data dari form inputan dikirim ke server. Validasi di client umumnya dilakukan dengan Javascript dan atribut HTML. Pada tutorial jquery kali ini, akan dijelaskan step by step bagaimana melakukan validasi form di sisi client dengan menggunakan library javascript JQuery dan plugin JQuery Validation. Tutorial dilengkapi dengan contoh program. Semoga bermanfaat