Académique Documents
Professionnel Documents
Culture Documents
Net
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-bulantahun 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.
Halaman 2 dari 14
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 2 3 4 5 6 7 <html> <head> <title>Validasi Form dengan JQuery Validation Achmatim.Net</title> <style type="text/css"> .labelfrm { display:block; font-size:small; Halaman 3 dari 14
41 42 <label for="submit" class="labelfrm"> </label> 43 <input type="submit" name="Submit" value="Submit"/> 44 </form> 45 </body> 46 </html> Halaman 4 dari 14
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 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 2 3 4 5 6 7 8 9 $('#frm-mhs').validate({ rules: { nim : { digits: true, minlength:10, maxlength:10 } } });
Halaman 6 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net Penambahan fungsi Validator untuk Format Tanggal
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(document).ready(function() { $('#frm-mhs').validate({ rules: { nim : { digits: true, minlength:10, maxlength:10 }, tgl: { indonesianDate:true } } }); }); $.validator.addMethod( "indonesianDate", function(value, element) { // put your own logic here, this is just a (crappy) example return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); }, "Please enter a date in the format DD/MM/YYYY" );
Halaman 7 dari 14
Halaman 8 dari 14
Membuat Validasi Form dengan JQuery Validation | Achmatim.Net Mengatur Pesan Kesalahan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 $('#frm-mhs').validate({ rules: { nim : { digits: true, minlength:10, maxlength:10 }, tgl: { indonesianDate:true }, umur: { digits: true, range: [0, 100] }, email: { email: true }, situs: { url: true }, pass2: { equalTo: "#pass1" } }, messages: { nim: { required: "Kolom nim harus diisi", minlength: "Kolom nim harus terdiri dari 10 digit", maxlength: "Kolom nim harus terdiri dari 10 digit" }, email: { required: "Alamat email harus diisi", email: "Format email tidak valid" }, pass2: { equalTo: "Password tidak sama" } } });
Halaman 9 dari 14
Gambar 2: Contoh Tampilan Hasil Validasi Source Lengkap Validasi Form dengan JQuery Validation
<html> <head> <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 1 2 3
} </style>
<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
$.validator.addMethod( "indonesianDate", function(value, element) { // 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
102 103 <label for="submit" class="labelfrm"> </label> 104 <input type="submit" name="Submit" value="Submit"/> 105 </form> 106 </body> 107 </html>
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
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