untuk source html bisa dilihat disini:
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pendaftaran</title>
<style media="screen">
#val, #valu, #valn, #valg{
font-size: 10px;
color: blue;
}
</style>
</head>
<body>
<form class="" name="pendaftaran" action="pendaftaran.php" method="post" onsubmit="return validate()">
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Misalkan : Andi" value="" onfocus="hapusnama()"></td>
<td><div id="val"></div></td>
</tr>
<tr>
<td>Umur</td>
<td>:</td>
<td><input type="text" name="umur" value="" onfocus="hapusu()"></td>
<td><div id="valu"></div></td>
</tr>
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="nim" value="" onfocus="hapusn()"></td>
<td><div id="valn"></div></td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
<td><select class="" name="gender" onfocus="hapusg()">
<option value="">Pilih</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select></td>
<td><div id="valg"></div></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="submit" name="" value="Submit" onclick="validate()"><input type="reset" name="" onclick="hapus()" value="Reset"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function validate() {
var g = document.forms["pendaftaran"]["nama"].value;
var nim = document.forms["pendaftaran"]["nim"].value;
var umur = document.forms["pendaftaran"]["umur"].value;
var gender = document.forms["pendaftaran"]["gender"].value;
var char = /[A-Za-z]|\./;
var numbers = /[0-9]|\./;
if(!g.match(char))
{
document.getElementById('val').innerHTML = "Nama harus berupa huruf";
}
if(!nim.match(numbers))
{
document.getElementById('valn').innerHTML = "Nim harus berupa angka";
}
if(!umur.match(numbers))
{
document.getElementById('valu').innerHTML = "Umur harus berupa angka";
}
if(gender == "")
{
document.getElementById('valg').innerHTML = "Gender harus diisi";
}
if(g == "" || nim == "" || umur == "" || gender == "")
{
return false;
}
}
function hapus() {
document.getElementById('val').innerHTML = "";
document.getElementById('valn').innerHTML = "";
document.getElementById('valg').innerHTML = "";
document.getElementById('valu').innerHTML = "";
}
function hapusnama() {
document.getElementById('val').innerHTML = "";
}
function hapusu() {
document.getElementById('valu').innerHTML = "";
}
function hapusn() {
document.getElementById('valn').innerHTML = "";
}
function hapusg() {
document.getElementById('valg').innerHTML = "";
}
</script>
</body>
</html>
dan hasilnya seperti ini
berikut hasil jadinya
0 komentar:
Posting Komentar