Validasi Form dengan JQuery
Pada posting sebelumnya saya telah memberikan cara melakukan validasi form dengan javascript. Kali ini saya akan memberikan cara validasi form dengan JQuery seperti pada tampilan di atas.
Pertama download file script JQuery di di website JQuery: http://jquery.com/download/. Dan file plugin JQuery Validation di http://jqueryvalidation.org/
Kemudian copy HTML coding berikut ini dalam file validasi.html.
<html>
<head>
<title>JQuery Form Validation</title>
<link rel="stylesheet" href="val.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules:{ nama:"required",
umur:{required:true,number: true},
username:"required",
password:{required: true,minlength:5},
cpassword:{required: true,equalTo: "#password"},
email:{required:true,email:true},
website:{required:true,url:true}
},
messages:{
nama:{required:'Nama harus di isi'},
umur:{
required:'Umur harus di isi',
number :'Hanya boleh di isi Angka'},
username: {
required:'Username harus di isi'},
password: {
required :'Password harus di isi',
minlength:'Password minimal 5 karakter'},
cpassword: {
required:'Ulangi Password harus di isi',
equalTo :'Isinya harus sama dengan Password'},
email: {
required:'Email harus di isi',
email :'Email harus valid'},
website: {
required:'Website harus di isi',
url :'Alamat website harus valid'}
},
success: function(label) {
label.text('OK!').addClass('valid');}
});
});
</script>
</head>
<body>
<div class="form-div">
<form id="form1" method="post" action="">
<div class="form-row">
<span class="label">Nama *</span>
<input name="nama" type="text">
</div>
<div class="form-row">
<span class="label">Umur *</span>
<input name="umur" id="umur" type="text">
</div>
<div class="form-row">
<span class="label">Username *</span>
<input name="username" id="username" type="text">
</div>
<div class="form-row">
<span class="label">Password *</span>
<input name="password" id="password" type="password">
</div>
<div class="form-row">
<span class="label">Ulangi Password *</span>
<input name="cpassword" id="cpassword" type="password">
</div>
<div class="form-row">
<span class="label">E-Mail *</span>
<input name="email" id="email" type="text">
</div>
<div class="form-row">
<span class="label">Website *</span>
<input name="website" id="website" type="text">
</div>
<div class="form-row">
<input class="submit" value="Proses" type="submit">
</div>
</form>
</div>
</body>
</html>
Berikut Coding CSS-nya (val.css)
.form-div {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border:1px #ccc solid;
padding:10px;
width:500px;
height:220px;
background-color:#def;
}
.form-div .submit {
margin-left:105px;
margin-top:10px;
}
.form-div .label {
display:block;
float:left;
width:100px;
text-align:right;
margin-right:5px;
}
.form-div input {
width: 180px;
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.form-div .form-row {
padding:5px 0;
clear:both;
width:700px;
}
.form-div label.error {
margin-left:10px;
width:250px;
display:block;
float:left;
color:red;
padding-left:20px;
background: url(unvalid.gif) no-repeat;
}
.form-div label.valid {
width:0px;
display: inline-block;
text-indent:0px;
color:#0000ff;
background: url(valid.gif) center no-repeat;
}
Untuk file icon valid.gif dan unvalid.gif bisa anda cari di google… 🙂
Selamat mencoba.
Coding Website 