Validation is very important when we deal with anything processing on web. The data must be validated before it is entered into the database. Validation could be on server side as well as client side. We are going to focus on validation using java script on the client side.With The below code you can validate Names which is a string , Age which is a number and a email which has syntax such as email@email.com.
To run this code you just need a java script enabled browser to test.
copy the code and rename the file with .html extension.
Code:(Put it into text file and rename the file with .html extension)
<html>
<head>
<title>
Register Form
</title>
<style type="text/css">
h3{color:white;font-size:20pt;font-family:comicsansms}
.inset
{
border-width: 8px; border-style: inset; border-color: black;padding:20pt
}
.margin{margin-left:100pt;margin-right:100pt}
a:link {color:pink;
text-decoration:none;
}
a:hover {
color:peach;
text-decoration:none;
}
table{line-height:0.5cm;letter-spacing:2px}
</style>
<script type="text/javascript">
function chkname()
{
var exp=RegExp(/^[A-Za-z]+$/);
var str=document.getElementById("name").value;
if(exp.test(str)==false)
{
alert("Name is either empty or invalid");
}
}
function chkemail()
{
var exp=RegExp(/^(\w*\.?\_?)+@\w+(\.[a-z])+/);
var str=document.getElementById("email").value;
if(exp.test(str)==false)
{
alert("email is either empty or invalid");
}
}
function filldob()
{
var month=new Array();
month=["January","February","March","April","May","June","July","August","September","October","November","December"];
for(i=0;i<month.length;i++)
{
var op1=document.createElement("OPTION");
op1.text=month[i];
op1.value=i;
document.getElementById("mth").options[i]=op1;
}
var dt=new Date();
for(i=0;i<31;i++)
{
var op1=document.createElement("OPTION");
op1.text=i+1;
op1.value=i+1;
document.getElementById("date").options[i]=op1;
}
for(i=0;i<60;i++)
{
var str=dt.getFullYear()-i;
var op1=document.createElement("OPTION");
op1.text=str;
op1.value=str;
document.getElementById("yr").options[i]=op1;
}
}
function calc_age()
{
var now=new Date();
var dat=document.getElementById("date").value;
var mnth=document.getElementById("mth").value;
var yrs=document.getElementById("yr").value;
var d1=parseInt(dat);
var mth=parseInt(mnth);
var yr=parseInt(yrs);
var dt=new Date(yr,mth,d1,00,00,00,00);
var str=now.getFullYear()-dt.getFullYear();
if(str>0&&(dt.getMonth()-now.getMonth())>=0&&(dt.getDate()-now.getMonth())>=0)
document.getElementById("age").value=str-1;
else
document.getElementById("age").value=str-1;
}
function chkfeb()
{
if(document.getElementById("mth").value==1)
{
for(i=28;i<31;i++)
{
document.getElementById("date").options[i].text="";
}
}
else
{
for(i=28;i<31;i++)
{
document.getElementById("date").options[i].text=i+1;
}
}
}
function chkmth()
{
if((document.getElementById("mth").value==3)||(document.getElementById("mth").value==5)||(document.getElementById("mth").value==8)||(document.getElementById("mth").value==10))
{
for(i=30;i<31;i++)
{
document.getElementById("date").options[i].text="";
}
}
}
</script>
</head>
<body style="background-color:orange" onload="filldob();calc_age()">
<center>
<h3>>>>>>Fill In The Details to Register<<<<</h3>
</center>
<br>
<form style=padding:auto;font-size:10pt onSubmit="chkname();chkemail()">
<div class="inset margin">
<table style="color:Black">
<tr>
<td>
Name:</td><td><input type="textbox" id="name"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="add" id="addr"></textarea></td>
</tr>
<tr>
<td>D.O.B:</td>
<td><select id="date" onChange="calc_age()"></select>
<select id="mth" onChange="chkfeb();chkmth();calc_age()"></select>
<select id="yr" onChange="calc_age()"></select></td>
</tr>
<tr>
<td>Age:</td><td><input type="textbox" id="age"></td>
</tr>
<tr>
<td>Email ID:</td>
<td><input type="textbox" id="email"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type=radio>Male
<input type=radio>Female</td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type="checkbox" name="ch" value:"play">Playing
<input type="checkbox" name="ch" value:"dance">Dancing
<input type="checkbox" name="ch" value:"read">Reading</td>
</tr>
<tr>
<td><input type="submit" value="Submit">
<input type="submit" value="Reset"></td>
</tr>
</table>
</div>
</form>
<br>
</body>
</html>
OUTPUT:
RSS Feed
Twitter
