Membuat Validasi Form dengan JQuery Validation | Achmatim.Net

Membuat Validasi Form dengan JQuery ValidationTutorial 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 cobacoba. 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-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 orangHalaman 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 divalidasiSebagai 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 Divalidasi1 2 3 4 5 6 7 Validasi Form dengan JQuery Validation Achmatim.Net .labelfrm { display:block; font-size:small; Halaman 3 dari 14

Membuat Validasi Form dengan JQuery Validation | Achmatim.Net8 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 40 size="15"/> size="15"/> ULANGI PASSWORD: UMUR: ALAMAT EMAIL: ALAMAT SITUS: PASSWORD: