Membuat Form Validasi Menggunakan JQuery

Form tanpa validasi pada website mungkin sudah tidak asing lagi bagi kita, sering kita jumpai berbagai jenis form pada website-website. Bagaimana dengan form yang menggunakan validasi?, Form validasi digunakan sebagai pelengkap website kita, agar form yang ada pada website kita lebih profesional. Contohnya saja yahoo, jika anda ingin membuat account baru di yahoo, dan anda mengisi form pendaftaran tidak sesuai aturan, maka pendaftaran tidak akan bisa disubmit, dan akan muncul validasi berupa peringatan, yang memberitaukan letak kesalahan kita pada pengisian form tersebut.

Disini saya akan menjelaskan bagaimana cara membuat form validasi tersebut.

Misalnya saja anda sebagai programmer pada suatu universitas, dan mendapatkan tugas dari pimpinan anda, yaitu membuat form pendaftaran mahasiswa yang akan mengikuti olimpiade pemrograman 2013. Form yang anda buat nantinya akan digunakan untuk mempermudah mahasiswa mendaftarkan diri sebagai calon anggota yang akan mengikuti olimpiade tersebut.

Disini saya lebih menjelaskan kearah validasi form, bukan kearah database penyimpanan.

Form tersebut terdiri dari: nama, alamat, jurusan, tanggal lahir, umur, telepon, email, URL, password, ulangi password dan mempunyai beberapa ketentuan yang harus dibuat yaitu:

1. Jika salah satu form belum terisi, maka tidak akan bisa disubmit, dan akan muncul peringatan yang berupa letak kesalahn kita pada pengisian form

2. Peda pengisian tanggal harus sesuai format DD/MM/YYYY, yang berupa tanggal, bulan, dan tahun lahir. jika tidak sesuai aturan tersbut maka form tidak bisa disubmit.

3. Pada pengisian umur harus diisi antara 15 - 30, jika ada umur yang lebih atau kurang dari angka tersbut, maka form tidak akan bisa disubmit. dan pengisian umur harus menggunakan angka, jika ada yang mengisi dengan huruf, maka tidak akan bisa disubmit.

4. Pada pengisian telepon harus berupa angka, jika ada yang mengisi dengan huruf tidak akan bisa disubmit,. dan telepon harus diisi dengan 12 digit angka, jika kurang atau lebih maka tidak akan bisa disubmit.

5. Pada pengisian email harus sesuai format email yang ada, jika tidak sesuai maka tidak bisa disubmit.

6. Pada pengisian URL harus sesuai dengan url yang ada menggunakan http. jika tidak sesuai format maka tidak akan bisa disubmit.

7. Pada pengisian password1 dan password2 harus diisi sama, jika password yang dimasukkan berbeda maka tidak akan bisa disubmit.

8. Setiap kegagalan tidak bisa disubmit, harus muncul peringatan letak kesalahannya dimana.

setelah kita tau apa saja yang harus dibuat,

langkah pertama adalah membuat formnya terlebih dahulu.

ketiklah program seperti ini untuk menampilkan form.

<!-- Programming: Hadi Kurniawan -->
<html>
<head>
<title>Hadi Kurniawan</title>
</head>
<body><center>
		<h1>OLIMPIADE PEMROGRAMAN 2013<h1>
		<h2>DATA MAHASISWA</h2>
		<form action="kirim.php" method="post" id="mahasiswa">
	<table>
			<tr>
				<td>Nama</td>
				<td>:</td>
				<td><input type="text" name="nama" id="nama" size="20" class="required"/></td>
			</tr>
			<tr>
				<td>Alamat</td>
				<td>:</td>
				<td><textarea name="alamat" id="alamat" cols="30" rows="3" class="required"></textarea></td>
			</tr>
			<tr>
				<td>Jurusan</td>
				<td>:</td>
				<td><input type="text" name="jurusan" id="jurusan" size="20" class="required"/></td>
			</tr>
			<tr>
				<td>Tanggal lahir</td>
				<td>:</td>
				<td><input type="text" name="tgl" id="tgl" maxlength="10" size="8" class="required"/></td>
			</tr>
			<tr>
				<td>Umur</td>
				<td>:</td>
				<td><input type="text" name="umur" id="umur" maxlength="2" size="1" class="required"/></td>
			</tr>
			<tr>
				<td>Telepon</td>
				<td>:</td>
				<td><input type="text" name="telepon" id="telepon" maxlength="12" class="required" size="10"/></td>
			</tr>
			<tr>
				<td>Email</td>
				<td>:</td>
			<td><input type="text" name="email" id="email" size="25" class="required"/></td>
			</tr>
			<tr>
				<td>URL</td>
				<td>:</td>
				<td><input type="text" name="url" id="url" size="25" class="required"/></td>
			</tr>
			<tr>
				<td>Password</td>
				<td>:</td>
			<td><input type="password" name="pass1" id="pass1" size="15" class="required"/></td>
			</tr>
			<tr>
				<td>Ulangi Password</td>
				<td>:</td>
				<td><input type="password" name="pass2" id="pass2" size="15" class="required"/></td>
			</tr>
			</table>
			<input type="submit" name="kirim" value="Submit"/>
			<input type="reset" value="Reset"/>
		</form>
		copyright algoritma-cyber.blogspot.com | cybermagic 2013
	</body>
</html>

keterangan:

<form action="kirim.php" method="post" id="mahasiswa">

action="kirim.php" untuk tempat pengiriman data yang disubmit, data tersbut nnati akan dieksekusi oleh file kirim.php

id="mahasiswa" untuk pemanggilan oleh javascript yang nnati akan kita buat., nantinya form tersebut yang id=mahasiswa akan dieksekusi oleh javascript yang akan kita buat.

-----------------------------------------------------------------------------------------------------------------------

class="required"

untuk membuat validasi form harus diisi semua.

Jika sudah simpan program tersebut dengan nama form_validasi.php.

sekarang coba anda jalankan, jika semua benar maka akan tampil seperti gambar dibawah ini:

sebelum membuat validasinya, anda terlebih dahulu harus memiliki library jquery yaitu .

jquery.js dan jquery.validate.js, untuk mendapatkannya anda bisa download terlebih dahulu disini

jika sudah, sekarang buatlah skirp buat validasi seperti ini:

<script language="JavaScript" src="jquery/jquery.js"></script>
<script language="JavaScript" src="jquery/jquery.validate.js"></script>
<script type="text/javascript">
		$(document).ready(function() {
			$('#mahasiswa').validate({
				rules: {
					telepon : {
						digits:true,
						minlength:12,
						maxlength:12
					},
					tgl: {
						tanggal:true
					},
					umur: {
						digits:true,
						range:[15, 30]
					}, 
					email: {
						email:true
					},
					url: {
						url:true
					},
					pass2: {
						equalTo:"#pass1"
					}
				},
				messages: {
					nama: {
						required: "nama harus diisi"
					},
					
					alamat: {
						required: "alamat harus diisi"
					},
					
					telepon: {
						required: "telepon harus diisi",
						minlength: "telepon harus terdiri dari 12 digit",
						maxlength: "telepon harus terdiri dari 12 digit"
					},
					
					jurusan: {
						required: "jurusan harus diisi"
					},
					
					tgl: {
						required: "tanggal lahir harus diisi"
					},
					
					umur: {
						required: "umur harus diisi"
					},
					
					
					url: {
						required: "url harus diisi"
					},
					
					
					email: {
						required: "email harus diisi",
						email: "Format email tidak valid"
					},
					pass2: {
						equalTo: "Password tidak sama"
					}
				}
			});
		});
		
		$.validator.addMethod(
			"tanggal",
			function(value, element) {
				return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
			},
			"format tanggal DD/MM/YYYY"
		);
		</script>

letakkan skirp tersebut didalam kode <head> .... </head>

keterangan:

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

untuk memanggil library yang telah kita download tadi.

==================================================================

telepon : {
						digits:true,
						minlength:12,
						maxlength:12
					},

untuk membuat validasi dari telepon,
digits:true, untuk membuat hanya angka yang boleh dimasukkan, jika memasukkan huruf maka tidak akan bisa disubmit.

minlength:12,
maxlength:12
untuk membuat aturan yaitu, telepon harus diisi minimal 12 digit angka, maksimal 12 digit angka

=======================================================================

tgl: {
						tanggal:true
					},

hanya boleh diisi dengan angka

========================================================================

umur: {
						digits:true,
						range:[15, 30]
					},

hanya boleh diisi dengan angka, dan harus diisi minimal umur 15, maksimal umur 30

=======================================================================

pass2: {
						equalTo:"#pass1"
					}

password 1 dan 2 harus sama,

========================================================================

messages: {
					nama: {
						required: "nama harus diisi"
					},

berupa pesan yang akan ditampilkan jika ada salah dalam memasukkan data

=======================================================================

$.validator.addMethod(
			"tanggal",
			function(value, element) {
				return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
			},
			"format tanggal DD/MM/YYYY"
		);

format tanggal harus dengan aturan tnggl/buln./tahun

Setelah selesai, buatlah kode CSS pada program anda,
agar lebih terlihat menarik

<style type="text/css">
input { padding: 2px; border: 1px solid #999; }
input.error, select.error { border: 1px solid red; }
label.error { color:red; margin-left: 10px; }
td { padding: 5px; }
	.labelfrm {    
			font-size:15;
		}
</style>

letakaan tepat dibawah skrip yang baru kita buat.

setelah semua selesai maka simpan program anda, dan jalankan kembali.
lakukanlah uji coba, untuk melihat berhasil atau tidaknya program yang anda buat.
jika berhasil, maka akan terlihat seperti gambar dibawah ini:

Jika anda masih kurang mengerti,
silakan anda bertnya langsung, bisa melalu komen disini, email, ataupun facebook.
semoga aritkel ini bermanfaat buat teman-teman.
salam kenal dan salam blogger.

+ komentar + 2 komentar

Unknown

12 November 2014 pukul 09.48

gan, lengkapi scriptnya dngn database, dan jadiin satu scriptnya di winrar, mksih. . .

2 Juni 2016 pukul 10.51

ini downdoad js sama vlidate jquery nya dimananya?

Posting Komentar

Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.

Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia

Catatan Hadi