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>
Javascript Tutorial
Javascript Syntax
Javascript Comments
Javascript Variables
Javascript Data Types
JavaScript Operators
JavaScript If-else
JavaScript Switch
JavaScript Loop
JavaScript Function
JavaScript Objects
Javascript Array
Javascript Array Methods
JavaScript Boolean
JavaScript Math Object
JavaScript Number
Javascript String
JavaScript Date
Javascript Document Object Model(DOM)
getElementById() method
getElementsByName() method
getElementsByTagName() method
Javascript innerHTML
Javascript innerText
JavaScript Events
JavaScript Cookies
JavaScript Cookies Attributes
JavaScript cookie with multiple name
JavaScript delete cookies
JavaScript form validation
Registration form with javascript validation
submit form without submit button
How to create a countdown timer in jquery
Allow Only Numbers in Textbox Javascript
How to allow alphabets in text-box using JavaScript
JavaScript Classes
JavaScript Prototype Object
JavaScript Constructor Method
JavaScript static Method
JavaScript Encapsulation
JavaScript Inheritance
JavaScript Abstraction
JavaScript Polymorphism
No Sidebar ads