Home >>Javascript Tutorial >Registration form with javascript validation

Registration form with javascript validation

Registration form with JavaScript validation

Registration forms are used in web pages to procure the details from the user. The users enter their details in the required field and the data is further being validated before getting it send to the server for processing. A form is basically a web form or HTML form. Examples of form use are prevalent in e-commerce websites, online banking, and online surveys to name a few.

Validation in JavaScript for registration form is mandatory. The data entered into a registration form validation needs to be in the right format and certain fields need to be filled in order to effectively use the submitted form. Username, password, contact information are some details that are mandatory in forms and thus need to be provided by the user.

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