Untuk menjamin bahwa yang diinputkan user adalah benar, maka form yang kita sediakan harus divalidasi. misalnya untuk data kode pos harus digits, username harus di isi dan minimal 5 huruf, dan lain sebagainya. pastinya validasi tersebut kita sesuaikan dengan form yang kita punya.
dengan bantuan jquery, kita bisa membuat validasi itu lebih mudah, karena setiap user mengisikan data ke form kita akan selalu di cek. dan ini jelas memudahkan user ketika menginputkan data, karena user akan tahu kesalahan dia dimana.
bagaimana cara membuatnya? sebenarnya cukup mudah karena di sini saya akan menggunakan fungsi-fungsi yang sudah ada dan kita cukup menyesuaikan dengan kebutuhan saja.
contoh scriptnya adalah sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Belajar Komputer</title>
<link href="css/cmxform.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#pendaftaran").validate({
rules: {
firstname: "required",
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
konPass: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
messages: {
firstname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
konPass: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
}
});
});
</script>
</head>
<body>
<h1 id="banner"><a href="http://komputerbelajar.blogspot.com">Validasi Form</a> Demo</h1>
<div id="main">
<p>Kunjungi <a href="http://komputerbelajar.blogspot.com">blog saya</a> jika ada yang kurang jelas </p>
<form action="" class="jNice" id="pendaftaran" name="pendaftaran" method="POST">
<fieldset>
<table>
<tr>
<td valign="top">Username </td>
<td width="20px" valign="top">: </td>
<td>
<input name="username" class="text-medium" id="username">
</td>
</tr>
<tr>
<td valign="top">Password </td>
<td width="20px" valign="top">: </td>
<td>
<input type="password" name="password" class="text-medium" id="password">
</td>
</tr>
<tr>
<td valign="top">konfirmasi Password </td>
<td width="20px" valign="top">: </td>
<td>
<input type="password" name="konPass" class="text-medium" id="konPass">
</td>
</tr>
<tr>
<td valign="top">Nama </td>
<td width="20px" valign="top">: </td>
<td>
<input name="nama" class="text-long" id="firstname">
</td>
</tr>
<tr>
<td valign="top">Nomor KTP</td>
<td width="20px" valign="top">: </td>
<td>
<input name="ktp" class="text-long">
</td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td width="20px" valign="top">: </td>
<td>
<textarea name="alamat"></textarea>
</td>
</tr>
<tr>
<td valign="top">Kota</td>
<td width="20px" valign="top">: </td>
<td>
<input name="kota" class="text-long">
</td>
</tr>
<tr>
<td valign="top">Kode Pos</td>
<td width="20px" valign="top">: </td>
<td>
<input name="kodePos" class="text-medium">
</td>
</tr>
<tr>
<td valign="top">Nomor Telepon</td>
<td width="20px" valign="top">: </td>
<td>
<input name="tlp" class="text-medium" >
</td>
</tr>
<tr>
<td valign="top">E-mail</td>
<td width="20px" valign="top">: </td>
<td>
<input name="email" class="text-long" id="email">
</td>
</tr>
<tr>
<td valign="top">Jabatan</td>
<td width="20px" valign="top">: </td>
<td>
<label>
<select name="idGroup">
<option value="1">Kecamatan</option>
<option value="2">Kabupaten</option>
<option value="3">Propinsi</option>
</select>
</label>
</td>
</tr>
<tr>
<td valign="top">Pertanyaan Keamanan</td>
<td width="20px" valign="top">: </td>
<td>
<input name="pertanyaan" class="text-long">
</td>
</tr>
<tr>
<td valign="">Jawaban</td>
<td width="20px" valign="top">: </td>
<td>
<textarea name="jawaban"></textarea>
</td>
</tr>
</table>
<input type="submit" value="Masukkan Data" />
</form>
</body>
</html>
pada contoh di atas yang paling penting adalah kita harus meng-include-kan jquery.js dan jquery.validate.js. bisa anda
download.
untuk melakukan validasi akan saya kasih contoh untuk yang password, pada kode html untuk inputan password diberi nama password dan id password, kemudian pada fungsi javascriptnya dipanggil dengan #pendaftaran (id dari form) dan
password: {
required: true,
minlength: 5
},
maksud dari validasi password tersebut adalah password harus diisi dan panjang minimal password adalah 5 karakter.
kode lengkapnya Silahkan
download disini.
