Membuat Validasi Dengan Jquery (Tanpa Plugin)

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

 

created by : muhammad bashir