Login and register page Validation through javascript


Posted Date:     Total Responses: 0    Posted By: sugandha   Member Level: Gold   Points/Cash: 7   


In this their are 3 pages index.html,welcome.html,newuser.html.

Index.html

In this user will enter the uid and the password. We check the criteria that userid should be string only and password should be numbe ronly using javascript.
See the code:

<html>

<script type='text/javascript'>

function checkuname()
{
var username=flogin.uname.value;
var alphaExp = /[^a-zA-Z]/;
if( alphaExp.test(username))
{
alert("enter characters");
}

}

function checkpass()
{
var pwd=flogin.pass.value;
if(isNaN(pwd))
{
alert("enter number");
}
}
</script>

</head>

<body>
<form action="welcome.html" name='flogin'>
username:<input type='text' name='uname' onblur="checkuname()"/><br/>
password:<input type='password' name='pass' onblur="checkpass()" /><br/>
<input type='submit' value='submit' />
<input type='reset' value='reset' />

</form>
</body>
</html>


If the condition satisfied user is redirected to welcome page.Else alert box is displayed for entering the data properly in the required format.
<b>Code for welcome page</b>
<html>
<head>
</head>
<body>
<h1>Welcome User!!!</h1>
</body>
</html>

Now Register page:
In this user enters the form and their are many validations to check the email in correct password, Contact number must be integer and 10 digit, Password and confirm password etc.
See the code:

<html>

<head>

<style type="text/css">

div.useracc
{
background-color:483d8b;
position:relative;
width:400px;
top:50px;
bottom:50px;
height: 60%;
margin:auto;
}

form.newuser
{
background-color:483d8b;
margin:auto;
width:600px;
height:90%;
}

h1
{

color:483d8b;
text-align:center;
}

#text
{
font-family:"Arial", Times, serif;
font-weight:bold;
color:f5f5dc;

}
</style>

<script type="text/javascript">
function checkname(elem)
{
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert("Name should not be blank and only string with no special characters");
}
}

function check_contact()
{
var num=fuser.contact.value;
if(isNaN(num) || (num.length != 10) )
{

alert("Contact Number should be number and ten characters only");

}
}



function emailValidator()
{
var email=fuser.emailer.value;
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(emailExp.test(email))
{
return true;
}
else
{
alert("Not a valid Email Format");
elem.focus();
return false;
}
}



function checkuname()
{
var username=fuser.uname.value;
var alphaExp = /[^a-zA-Z]/;
if( alphaExp.test(username))
{
alert("enter characters");
}

}

function checkpass()
{
var pwd=fuser.pwd.value;
if(isNaN(pwd))
{
alert("enter number");
}
}


function conpass()
{
var cpass=fuser.cpwd.value;
var pwd=fuser.pwd.value;
if(cpass != pwd)
{
alert("Password doesn't match");
}
}

</script>

</head>




<body bgcolor="f5f5dc">
<h1>Create New User</h1>


<form class="newuser" name="fuser">
<div class="useracc">
<p id="text">FirstName:<input type='text' id='fname' onblur="checkname(document.getElementById('fname'))"/><br/></p>

<p id="text">LastName:<input type='text' id='lname' onblur="checkname(document.getElementById('lname'))"/><br/></p>

<p id="text">Gender:<input type='radio' name="gender" value="Male"> Male
<input type='radio' name="gender" value="Female"> Female <br/></p>


<p id="text">DOB: <b>Day</b><select name="date">
<script type="text/javascript">
var i=1;
for(i=1;i<=31;i++)
{
document.write("");
}

</script>
</select></br></p>

<p id="text">Education:<br/>
<input type="checkbox" name="edu" value="ssc" /> S.S.C.
<input type="checkbox" name="edu" value="hsc" /> H.S.C. <br/>
<input type="checkbox" name="edu" value="grad" /> Graduation
<input type="checkbox" name="edu" value="pg" /> Post Graduation

<input type="checkbox" name="edu" value="other" /> Other





<p id="text">Contact Number: <br/></p>


<p id="text" style="float:left">Address:</p>