Berikut tampilan codenya:
<html>
<head>
<title>Untitled Document</title>
<style>
.full
{
width:100%;
border-color:#00C;
}
#kanan{
float:right;
}
body
{
background-color:#666;
}
</style>
</head>
<body>
<center><h1> Registration Form </h1></center>
<br>
<form>
<table>
<tr>
<td><label> Name </label></td>
<td class="full"> <input type="text" placeholder="Name" class="full" id="name"/> </td>
</tr>
<tr>
<td><label> Address </label></td>
<td class="full"> <textarea placeholder="Address" class="full" id="address"></textarea> </td>
</tr>
<tr>
<td><label> Phone </label></td>
<td class="full"> <input type="text" placeholder="Phone" class="full" id="phone"/> </td>
</tr>
<tr>
<td><label> Gender </label></td>
<td> <input type="radio" name="rdoGender"> Male
<input type="radio" name="rdoGender"> Female </td>
</tr>
<tr>
<td></td>
<td class="full"> <input type="submit" value="submit" id="kanan" onClick="validate()"> </td>
</tr>
</table>
</form>
</body>
<script>
var temp = document.getElementById('name');
var temp2 = document.getElementById('address');
var temp3 = document.getElementById('phone');
var temp4 = document.getElementsByName("rdoGender");
function validate(){
if(temp.value == null || temp.value == "")
{
alert("Name cannot be empty!");
e.preventDefault();
}
else if(temp2.value.search("jalan") == -1)
{
alert("Address must contain 'jalan'!");
e.preventDefault();
}
else if(isNaN(temp3.value) || temp3.value=="")
{
alert("Phone must be filled by numeric!");
e.preventDefault();
}
else if(temp4[0].checked == false || temp4[1].checked == false)
{
alert("Gender must be selected!");
e.preventDefault();
}
}
</script>
</html>
berikut merupakan hasil tampilan yang muncul dari code diatas:
