Form that we provide must be validated to ensure that user input is correct. eg for postal codes are digits, the username must be filled and at least 5 letters, and others. surely this validation we adjust the form that we have.
With jQuery, we can make validation easier, because each user to fill in data into the form we will always be in check. and this is obviously easier for users when the input data, because users will know where he's wrong.
how do we make it? actually quite easy because we will use the functions that already exist and we just adjusting to the needs of all.
example script is follows:
<!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>
in the example above of the most important thing is we have to include a jquery.js and jquery.validate.js. you can download it.
for validation, I give an example for a password, the html code for password input.
password: {
required: true,
minlength: 5
},purpose of validating the password is the password must be filled and a minimum length of password is 5 characters.
You can download source code here.
Tidak ada komentar:
Posting Komentar