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">pada contoh di atas yang paling penting adalah kita harus meng-include-kan jquery.js dan jquery.validate.js. bisa anda download.
<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>
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.
mas kenalkan saya surya
ReplyDeletesaya masih dalam proses belajar javascript
kebetulan waktu searching tutorial javascript di google
saya ketemu dengan blognya mas
tutorialnya gampang dimengerti
terutama yang javascript : validasi form dengan jquery
di tempat lain tutorialnya rumit
eh disini simple banget
oh ya mas, saya rencananya mau ngembangin lagi supaya validasinya bisa mengetahui usernamenya udha ada di database pa belum
kira" dimana ya cari referensinya?
untuk perintah kayak required, equalTO dll
atau mas punya saran
thanks berat mas
matadewa
klw aq mke ajax gan...,
Deletegmn klo kita mau validasi inputan digit ktp dengan tggal lahir karena di ktp kan ada tanggal bulan dan tahun lahir
ReplyDeletemhn bantuannya mas