Membuat validasi form website dengan Java Script, data tidak boleh kosong
Pada artikel ini akan kita bahas cara membuat validasi form di website. Maksudnya validasi adalah memeriksa apakah data yang dimasukkan oleh User sesuai dengan yang kita inginkan atau tidak, kalau iya maka data akan dikirim ke Server, jika sebaliknya maka akan ditahan sampai User memasukkan data sesuai dengan yang diminta. Di artikel ini kita akan membuat user tidak bisa mengirim data form jika masih ada field yang kosong(tidak diisi). Berikut langkahnya
1) Buka Macromedia Dreamweaver atau Web editor yang biasa Anda pakai
2) Buat proyek baru
3) Ketik skrip berikut
<!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>Validasi Form data kosong</title>
</head>
<script language="javascript">
function validasi(){
return cekKosong('nama','Nama') &&
cekKosong('negara','Negara') &&
cekKosong('email','E-Mail') &&
cekKosong('alamat','Alamat Rumah') &&
cekKosong('umur','Umur');
}
function cekKosong(id,nama){
var isi= document.getElementById(id).value;
if(isi.length==0){
alert("Data "+nama+" tidak boleh kosong!!");
return false;
}
return true
}
</script>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="return validasi()">
<label> </label>
<table width="349" height="239" border="1" align="center">
<tr>
<td width="185"><div align="right">Nama</div></td>
<td width="148"><input name="nama" type="text" id="nama" /></td>
</tr>
<tr>
<td><div align="right">Asal Negara </div></td>
<td><input name="negara" type="text" id="negara" /></td>
</tr>
<tr>
<td><div align="right">E-Mail</div></td>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td><div align="right">Alamat Rumah </div></td>
<td><input name="alamat" type="text" id="alamat" /></td>
</tr>
<tr>
<td><div align="right">Umur</div></td>
<td><input name="umur" type="text" id="umur" /></td>
</tr>
<tr>
<td height="28" colspan="2"><label>
<div align="center">
<input type="submit" name="Submit" value="Submit" />
</div>
</label></td>
</tr>
</table>
<label></label>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</form>
</body>
</html>
4) Simpan skrip tersebut kemudian jalankan di browser, Anda akan melihat contoh form yang membutuhkan validasi sebelum dikirim ke Server. Skrip yang saya berikan ini hanyalah skrip dasar, Anda bisa mengembangkan lebih jauh skrip tersebut agar bisa membuat validasi form yang lebih canggih.
Jika ada yang ingin Anda tanya silahkan isi pertanyaan di kotak komentar yang berada di bawah artikel ini
1) Buka Macromedia Dreamweaver atau Web editor yang biasa Anda pakai
2) Buat proyek baru
3) Ketik skrip berikut
<!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>Validasi Form data kosong</title>
</head>
<script language="javascript">
function validasi(){
return cekKosong('nama','Nama') &&
cekKosong('negara','Negara') &&
cekKosong('email','E-Mail') &&
cekKosong('alamat','Alamat Rumah') &&
cekKosong('umur','Umur');
}
function cekKosong(id,nama){
var isi= document.getElementById(id).value;
if(isi.length==0){
alert("Data "+nama+" tidak boleh kosong!!");
return false;
}
return true
}
</script>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="return validasi()">
<label> </label>
<table width="349" height="239" border="1" align="center">
<tr>
<td width="185"><div align="right">Nama</div></td>
<td width="148"><input name="nama" type="text" id="nama" /></td>
</tr>
<tr>
<td><div align="right">Asal Negara </div></td>
<td><input name="negara" type="text" id="negara" /></td>
</tr>
<tr>
<td><div align="right">E-Mail</div></td>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td><div align="right">Alamat Rumah </div></td>
<td><input name="alamat" type="text" id="alamat" /></td>
</tr>
<tr>
<td><div align="right">Umur</div></td>
<td><input name="umur" type="text" id="umur" /></td>
</tr>
<tr>
<td height="28" colspan="2"><label>
<div align="center">
<input type="submit" name="Submit" value="Submit" />
</div>
</label></td>
</tr>
</table>
<label></label>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</form>
</body>
</html>
4) Simpan skrip tersebut kemudian jalankan di browser, Anda akan melihat contoh form yang membutuhkan validasi sebelum dikirim ke Server. Skrip yang saya berikan ini hanyalah skrip dasar, Anda bisa mengembangkan lebih jauh skrip tersebut agar bisa membuat validasi form yang lebih canggih.
Jika ada yang ingin Anda tanya silahkan isi pertanyaan di kotak komentar yang berada di bawah artikel ini
permisi kaka....tutorial ini
BalasHapusyg saya cari2...eh nemu
juga akhirnya...
Tapi nubitol mw nanya
nih...
Itu script2nya ditaruh dimana kaka?
Mohon step by step
nya
Thnks :)
@Ero: Skrip tersebut ditaruh disebuah file html kemudian jalankan di browser dengan cara klik dua kali file tersebut
BalasHapus^_^