Oke, selamat datang buat kalian yang ingin tau bagaimana sih cara membuat validasi form dengan Jquerry. Oke sebelumnya kita mengenal terlebih dahulu apa itu validasi form.
Validasi form adalah hal yang wajib dilakukan dalam setiap pembuatan aplikasi. Ada banyak cara memvalidasi form berbasis web, namun cara yang paling simple dan menarik adalah menggunakan jQuery, lebih tepatnya menggunakan jquey Plugin bernama jQuery validate.
Sebelumnya saya pernah membahas tentang validasi form menggunakan class javascript yang bisa anda baca di sini, namun kekurangan dari class tersebut adalah sebagai berikut
Validasi dilakukan saat submit
script validasi cukup panjang
Pesan error tidak interaktif.
Dengan menggunakan jQuery validate, maka ketiga kekurangan diatas bisa diatasi.Kembali ketopik, saya akan membuat form pendaftaran dengan tampilan seperti dibawah ini. Error akanmuncul jika input user salah atau tidak valid. Error muncul disamping kanan textfield, error bersifat interaktif, jadi kalau textfield di isi dengan data yang tidak valid, pesan error akan muncul saat itu juga dan pesan error akan hilang dengan sendirinya jika user mengisi data yang valid.
Contoh tampilan form saat error menggunakan jquery validasi.
Setelah mengetahui sedikit ulasan tadi. Yuk kita mulai caranya.
Pertama download file script JQuery di di website JQuery: http://jquery.com/download/. Dan file plugin JQuery Validation di http://jqueryvalidation.org/
copy script yang ada di link tersebut dan simpan dengan nama jquery.js dan jquery.validate.js.
Setelah itu,kita membuat koding yang akan kita simpan sebagai file html.
<html>
<head>
<title>Validasi</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>
Yang ketiga, kita membuat desain dengan css style, tulis coding seperti dibawah ini. simpan dengan nama 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;
}
Setelah itu coba jalankan di web browser kalian.
Selamat mencoba dan semoga bermanfaat.
