Oke teman-teman, sesuai dengan judul artikel kali ini , kita akan membuat form validasi dengan jquery tanpa menggunakan plugin . Validasi di butuhkan untuk mengecek sebuah inputan data , apakah data sudah diisi dengan benar atau belum. Pertama-tama buat folder dengan nama validasi . Kemudian Download file jquery di jquery.com . Kemudian simpanfile jquery ke dalam folder validasi . kemudian buat file dengan nama validasi_jquery.html . Simpan file ke dalam folder validasi . Lalu ketikkan script seperti di bawah ini ke dalam file validasi_jquery.html
<!DOCTYPE html>
<html>
<head>
<title>Webhozz Training Center</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“.form”).submit(function(){
var nama = $(“#nama”).val().length;
var alamat = $(“#alamat”).val().length;
if(nama==0)
{
$(“.pesan-nama”).css(‘display’,’block’);
return false;
}
else if(alamat==0)
{
$(“.pesan-alamat”).css(‘display’,’block’);
return false;
}
});
});
</script>
</head>
<body>
<h2>Validasi Dengan JQuery</h2>
<form class=”form” method=”post”>
Nama <br>
<input type=”text” name=”” id=”nama”><br>
<span class=”pesan-nama” style=”display: none;color: red;”>Nama Harus Diisi !</span><br><br>
Alamat<br>
<textarea id=”alamat”></textarea><br>
<span class=”pesan-alamat” style=”display: none;color: red;”>Alamat Harus Diisi !</span><br><br>
<input type=”submit” name=”” value=”simpan”>
</form>
</body>
</html>
Kemudian simpan ulang file validasi_jquery.html
Maka tampilan awal dari file tersebut seperti di bawah ini
Ketika data di kosongkan , kemudian klik tombol simpan, maka akan muncul pesan seperti di bawah ini
Demikian tutorial singkat dari kami…semoga bermanfaat dan selama mencoba