Membuat Validasi Form dengan JQuery Validation
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 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:
Contoh Form Inputan Data Mahasiswa
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.
- <html>
- <head>
- <style type="text/css">
- .labelfrm {
- display:block;
- font-size:small;
- margin-top:5px;
- } .error { font-size:small; color:red; }
- </style>
- </head>
- <body>
- <form action="proses.php" method="post" id="frm-mhs">
- <input type="text" name="nim" id="nim" maxlength="10" size="15"/>
-
- <input type="text" name="nama" id="nama" size="30"/>
-
-
- <input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>
-
- <input type="text" name="umur" id="umur" maxlength="3" size="7"/>
-
- <input type="text" name="email" id="email" size="50"/>
-
- <input type="text" name="situs" id="situs" size="50"/>
-
- <input type="password" name="pass1" id="pass1" size="15"/>
-
- <input type="password" name="pass2" id="pass2" size="15"/>
-
- <input type="submit" name="Submit" value="Submit"/>
- </form>
- </body>
- </html>
#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:
- Semua field inputan yang harus diisi (required)
- Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf)
- Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
- Inputan UMUR diisi dengan angka antara 0-100
- Inputan ALAMAT EMAIL diisi dengan format penulisan email.
- Inputan ALAMAT SITUS diisi dengan format penulisan situs.
- 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>
- <script type="text/javascript">
- $(document).ready(function() {
- $('#frm-mhs').validate();
- });
- </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 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"/>
Aturan 2: Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf)
- $('#frm-mhs').validate({
- rules: {
- nim : {
- digits: true,
- minlength:10,
- maxlength:10
- }
- }
- });
Aturan 3: Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
- $(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"
- );
Aturan 4: Inputan UMUR diisi dengan angka antara 0-100
- umur: {
- digits: true,
- range: [0, 100]
- }
Aturan 5: Inputan ALAMAT EMAIL diisi dengan format penulisan email.
Aturan 6: Inputan ALAMAT SITUS diisi dengan format penulisan situs.
Aturan 7: Inputan PASSWORD dan ULANGI PASSWORD harus sama.
- $('#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"
- }
- }
- });
Mengganti Pesan Kesalahan
- $('#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"
- }
- }
- });
Form Inputan yang Sudah Ditambahkan Validasi
Demo dan Download
About Author
Achmad Solichin | Website | Twitter
Telah menjadi staff pengajar di Universitas Budi Luhur (Jakarta) sejak tahun 2005. Selain mengajar, dia juga menyusun berbagai tutorial praktis di bidang komputer dan sempat menulis beberapa buku gratis, semua dipublikasikan di situs resminya, Achmatim.Net
Ngakak pak liat ini :
“Sederhana saja, kalo dibuat lubang yang terlalu besar, saya yakin akan sering ditemukan sendal jepit yang masuk ke sana”
klo sekarang kan ada fitur html5 required di elemen input, jdi klo input-nya kosong ga bisa di submit…
jdi masih perlukan validasi form??
tentu validasi form selalu perlu. soal teknologi-nya ya tinggal mengikuti perkembangan jaman. btw, masih banyak pengguna internet yang pake browser belum support html5, cmiiw
ok, nice info…
Nice brother postnya,,,
lanjutkan,,,
Apa kabar mas?
Mantab mas, info nya sangat menarik,
yang buat radio button mana gan??
boleh ga di upload cara bikin web design bengkel sepeda motor bentuk profil dari awal sampai jadi tampil menggunakan php dengan dreamweaver.
ikut ma ma tutorial databasenya, aku lgi belajar php gan
wah ini bermanfaaat banget ^_^
kunjungan balik ya gan heheh
mas, tutorial mengenai html 5 dong..
kan sekarang html 5 lagi mulai terkenal..
tq
wah, bagus ne yang paling aku cari, apalagi ingin banget buat semacam form kayak gini untuk kantor, izin bookmark gan!!!
wah kalo no.tlp gmn bang hehehe
bagaimana jika form nya dalam bentuk multiple gan//
yg mana harus ada looping didalm nya (misal : form nya terdiri dari , nim_1, nama_1 –> nim_2 , nma_2 –> dst..
lha memasukkan looping nya untuk validasi gimana.. thanks///
selectornya bisa pake class, trus tinggal panggil $(‘.namaclass’).validate()
Tapi kok JQuery gak fungsi yah klo di tag apa emang gak fungsi yah klo formnya diselipin di tag PHP mas?
$(function(){
$(“#form”).validate({
rules: {
nama_kategori: {
required: true,
minlength: 3
}
},
messages: {
nama_kategori: {
required: ‘This field is required’,
minlength: ‘Minimum length: 3′
}
},
success: function(label) {
label.html(‘OK’).removeClass(‘error’).addClass(‘ok’);
setTimeout(function(){
label.fadeOut(500);
}, 2000)
}
});
});
kalo selectornya pake tag, tidak perlu make tanda #. jadi seharusnya cuman $(‘form’).validate()
Waaah..tutorialnya keren pak…, tetapi saya jadi berpikir zaman sekarang kok sepertinya banyak sekali tools-tools yang membuat mudah programmer, apa itu tidak mempengaruhi pola pikir programmer menjadi manja pak?
wah..thx for the tutorial
contoh java script untuk validasi nama tidak boleh kosong dan tidak boleh angka gimana y pak..?
simpel dan lengkap. saya suka. trims.
halo om
saya tanya dong kalo semisal tipe Submit diganti dengan Button gimana ya om
sample :
Diganti
bisa di tambahin gk om
pliss om,,, aku baru belajar nih
makasih sebelumnya
Regard
Joko K
makasi infonya sangat membantu.
Kalo Foto gak bisa ni mas!!!!
Alhamdulilah ketemu juga yg ku cari…terimakasih pak tutorialnya
Mas admin atau rekan2, kenapa yah validasi seperti ini tidak bisa di terapkan pada editor tinymcpuk atau openwysiwyg dia tidak bisa membaca value nya textarea, jadi soo.. walaupun datanya sudah di kosongkan, tetap saja bisa di save, kan sia2 tuh validasinya, bisa nya cuma pada textarea tanpa tinymcpuk atau openwysiwyg, tolong penjelasannya sekian!!..
bisa coba solusi ini: http://stackoverflow.com/questions/10131526/jquery-validation-form-with-tinymce-field-who-gives-no-error-by-empty-value
yang dengan radio button ada ga pak?
terima kasih sebelumnya
tergantung validasi yang diinginkan di radiobutton, jika ingin “memaksa” user agar selalu mengisi sebenarnya tinggal dibuat secara default salah satu radiobutton ter-checked.
Pak, kLo Kasus nya seperti ini Validasinya Gmna,?? Minta Bantuannya.. Terima Kasih..
Kasus ny Langsung Input Ke Database Jg..
Terima Kasih..
———————————————————————————————————
"Pastikan kolom terisi dengan benar"
Nama Pelamar
:
Tanggal Lahir
:
<?
for ($i=1; $i<=31; $i++) {
$tg = ($i<10) ? "0$i" : $i;
echo "$tg”;
}
?>
–
<?
for ($i=1; $i<=12; $i++) {
$bl = ($i<10) ? "0$i" : $i;
echo "$bl”;
}
?>
–
<?
for ($i=1970; $i<=2000; $i++) {
echo "$i”;
}
?>
Jenis Kelamin
: Pria
Wanita
Alamat
:
Kota
:
Bandung
Bogor
Cianjur
Jakarta
Karawang
Sukabumi
Telpon
:
Pend. Akhir
:
SMA/sederajar
D1
D2
D3
S1
S2
S3
Email
:
Username
:
Password
:
busyet… skrip apaan tuh? jangan paste langsung programnya di komentar atuh, pusing bacanya. silahkan bisa manfaatkan http://pastebin.com atau attach ke email aja.
mas misal nya kalo validate email&username yang sudah terdaftar di database gimana ?
seperti referensi biasa kita membuat email, terus tertulis email sudah terdaftar gt..
ini seperti validasi gmail gitu ya? kalau salah masukin password / username terus field form nya jd warna merah dan ada keterangannya.?