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
sumber : http://bahaskomputer.blogspot.com/2009/05/tahap-pembuatan-game.html
Terimakasih sudah menyertakan link sumbernya ^_^
Ini ada artikel kelanjutan dari artikel sebelumnya
http://bahaskomputer.blogspot.com/2011/11/cara-mempublish-game-buatan-sendiri.html