Registration form with javascript validation

Home > Javascript Tutorial > Registration form with javascript validation

Best PHP Live Project Based Winter Training in Noida for more details click here



Registration form with javascript validation

Create a Registration Form With Javascript Validation

<html>
<head>
<title>Registration form </title>
<style>
#main
{
width:650px;
height:550px;
border:1px solid black;
margin:auto;
background:#F3F3F3;
box-shadow:1px 1px 1px 1px grey;
}
#row
{
width:99%;
height:40px;
border:1px solid #F3F3F3;
}
.col
{
width:32%;
height:89%;
border:1px solid #F3F3F3;
float:left;
margin-left:2px;
}
input
{
height:30px;
width:200px;
border-radius:2px;
}
input{type=submit}
{
width:100px;
}
input:hover{border:1px solid red}
input:hover{background:gray}
input{font-size:25px}
.r
{
width:10px;
height:15px;
font-size:10px;
}
</style>
<script type="text/javascript">
function chkblnk(eid,errid)
{
var x=document.getElementById(eid).value;
if(x=="")
{
document.getElementById(errid).innerHTML="pls fill this field";
}
else
{
document.getElementById(errid).innerHTML="";
}
}

function chkAplha(event,err)
{
if(!((event.which>=65 && event.which<=90) || (event.which>=97 && event.which<=122) || event.which==0 || event.which==8))
{
document.getElementById(err).innerHTML="invalid name format";
return false;
}
}

function chkeid()
{
var e=document.getElementById("e").value;
var atpos=e.indexOf("@");
var dotpos=e.lastIndexOf(".");
if(atpos<4 || dotpos<atpos+3)
{
document.getElementById("error2").innerHTML="invalid email";
}
else
{
document.getElementById("error2").innerHTML="";
}
//alert(atpos+" "+dotpos);
}
</script>
</head>
<body>
<div id="main">
<h5 align="center">Registration Page</h5>
<div id="row" style="color:black">
<div class="col">Your First Name</div>
<div class="col"><input type="text" id="fn"  onkeypress="return chkAplha(event,'error')" onblur="chkblnk('fn','error')"/></div>
<div class="col" id="error" style="color:red"></div>
</div>
<div id="row" style="color:black">
<div class="col">Your Last Name</div>
<div class="col"><input type="text" id="ln" onblur="chkblnk('ln','error1')"/></div>
<div class="col" id="error1" style="color:red"></div>
</div>
<div id="row" style="color:black">
<div class="col">Your Email id</div>
<div class="col">
<input type="text" id="e" onblur="chkeid()"/></div>
<div class="col" id="error2" style="color:red"></div>
</div>
<div id="row" style="color:black">
<div class="col">Your Passord</div>
<div class="col"><input type="password" id="p"  onblur="chkblnk('p','error3')"/></div>
<div class="col" id="error3" style="color:red"></div>
</div>
<div id="row" style="color:black">
<div class="col">Conform Pass</div>
<div class="col"><input type="password" id="cp"  onblur="chkblnk('cp','error4')"/></div>
<div class="col" style="color:red" id="error4"></div>
</div>
<div id="row" style="color:black">
<div class="col">Your Address</div>
<div class="col">
<textarea id="adds" onblur="chkblnk('adds','error5')"></textarea></div>
<div class="col" style="color:red" id="error5"></div>
</div>

</div>
</body>
</html>

reg_form_validation