html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign up</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='validate.js'></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="form" method="post" action="index.php" onsubmit="return datevalid(this)">
<div id='wrapper'>
<table id='sign'>
<tr>
<td><h3>Sign up</h3></td>
<td></td>
</tr>
<tr>
<td>First name:</td>
<td><input type="text" name="fname" class="field" class='qclass'/>
<div id='fnameerror' class='errorhide'></div>
</td>
<td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="lname" class="field" class='qclass'/>
<div id='lnameerror' class='errorhide'></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name='gender' class='qclass'>
<option>Gender</option>
<option>Male</option>
<option>Female</option>
</select>
<div id='gendererror' class='errorhide'></div>
</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td>
<select name="day" class='qclass'>
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month" class='qclass'>
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select name="year" class='qclass'>
<option>Year</option>
<option>1900</option>
<option>1901</option>
<option>1902</option>
<option>1903</option>
<option>1904</option>
<option>1905</option>
<option>1906</option>
<option>1907</option>
<option>1908</option>
<option>1909</option>
<option>1910</option>
<option>1911</option>
<option>1912</option>
<option>1913</option>
<option>1914</option>
<option>1915</option>
<option>1916</option>
<option>1917</option>
<option>1918</option>
<option>1919</option>
<option>1920</option>
<option>1921</option>
<option>1922</option>
<option>1923</option>
<option>1924</option>
<option>1925</option>
<option>1926</option>
<option>1927</option>
<option>1928</option>
<option>1929</option>
<option>1930</option>
<option>1931</option>
<option>1932</option>
<option>1933</option>
<option>1934</option>
<option>1935</option>
<option>1936</option>
<option>1937</option>
<option>1938</option>
<option>1939</option>
<option>1940</option>
<option>1941</option>
<option>1942</option>
<option>1943</option>
<option>1944</option>
<option>1945</option>
<option>1946</option>
<option>1947</option>
<option>1948</option>
<option>1949</option>
<option>1950</option>
<option>1951</option>
<option>1952</option>
<option>1953</option>
<option>1954</option>
<option>1955</option>
<option>1956</option>
<option>1957</option>
<option>1958</option>
<option>1959</option>
<option>1960</option>
<option>1961</option>
<option>1962</option>
<option>1963</option>
<option>1964</option>
<option>1965</option>
<option>1966</option>
<option>1967</option>
<option>1968</option>
<option>1969</option>
<option>1970</option>
<option>1971</option>
<option>1972</option>
<option>1973</option>
<option>1974</option>
<option>1975</option>
<option>1976</option>
<option>1977</option>
<option>1978</option>
<option>1979</option>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
</select>
<div id='dateerror' class='errorhide'></div>
</td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" type="text" class="field" class='qclass'/>
<div id='emailerror' class='errorhide'></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td><input name="uname" type="text" class="field" class='qclass'/>
<div id='unameerror' class='errorhide'></div>
</td>
</tr>
<tr>
<td>Password:</td><td><input name="pword" id="pw" type="password" class="field" class='qclass'/>
<div id='pworderror' class='errorhide'></div></td>
</tr>
<tr>
<td>Retype Password:</td>
<td><input name="rpword" type="password" class="field" class='qclass'/>
<div id='rpworderror' class='errorhide'></div>
</td>
</tr>
<tr>
<td><input name="signup" type="submit" value="Sign up" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
css
#wrapper
{
width:60%;
background-color:#CCC;
padding:10px 10px 20px 10px;
font-family:Tahoma, Geneva, sans-serif;
}
h1
{
margin:0px;
}
#sign
{
width:auto;
margin-left:70px;
}
#sign .field
{
width:250px;
height:25px;
font-size:16px;
vertical-align:middle;
padding:2px;
}
#sign select
{
vertical-align:middle;
width:auto;
height:30px;
padding:5px;
font-size:14px;
}
#sign td
{
vertical-align:middle;
}
.errorshow
{
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
border:thin solid #F00;
background-color:#FCC;
padding:2px 2px 2px 2px;
display:block;
}
.errorhide
{
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
border:thin solid #F00;
background-color:#FCC;
padding:2px 2px 2px 2px;
display:none;
}
Jquery code
$(document).ready(function(){
$(".field").change(function(){
var error;
var x;
var regn= /^[A-Za-z]{3,20}$/;
var regu = /^[A-Za-z0-9_]{6,20}$/;
var rege =/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var regp = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
function showerror(error,x)
{
$("#"+x).removeClass("errorhide");
$("#"+x).addClass("errorshow");
document.getElementById(x).innerHTML = error;
}
function hideerror(x)
{
$("#"+x).removeClass("errorshow");
$("#"+x).addClass("errorhide");
}
if($(this).attr('name')=="fname")
{
if(!(regn.test($(this).val())))
{
showerror("Enter correct firstname","fnameerror");
}
else
{
hideerror("fnameerror")
}
}
if($(this).attr('name')=="lname")
{
if(!(regn.test($(this).val())))
{
showerror("Enter correct lastname","lnameerror");
}
else
{
hideerror("lnameerror")
}
}
if($(this).attr('name')=="email")
{
if($(this).attr('name')=="email")
{
}
if(!(rege.test($(this).val())))
{
showerror("Enter correct emailID","emailerror");
}
else
{
hideerror("emailerror")
}
}
if($(this).attr('name')=="uname")
{
if(!(regu.test($(this).val())))
{
showerror("Enter a valid username","unameerror");
}
else
{
hideerror("unameerror")
}
}
if($(this).attr('name')=="pword")
{
if(!(regp.test($(this).val())))
{
showerror("Enter a valid password","pworderror");
}
else
{
hideerror("pworderror")
}
}
if($(this).attr('name')=="rpword")
{
if($(this).val()!= document.getElementsByName('pword').value)
{
showerror("Password doesn't match","rpworderror");
}
else
{
hideerror("rpworderror")
}
}
});
});
function datevalid(form)
{
var cm;
var d=form.day.value;
var m=form.month.value;
var y=form.year.value;
var g=form.gender.value;
var time=new Date();
var check=0;
switch (m)
{
case "January":
cm=0;
break;
case "February":
cm=1;
break;
case "March":
cm=2;
break;
case "April":
cm=3;
break;
case "May":
cm=4;
break;
case "June":
cm=5;
break;
case "July":
cm=6;
break;
case "August":
cm=7;
break;
case "September":
cm=8;
break;
case "October":
cm=9;
break;
case "November":
cm=10;
break;
case "December":
cm=11;
break;
}
if(g=="Gender")
{
document.getElementById('gendererror').className = 'errorshow';
document.getElementById('gendererror').innerHTML="Enter your gender";
check=1;
}
else
{
document.getElementById('gendererror').className = 'errorhide';
}
if(d=="Day" || m=="Month" || y=="Year")
{
document.getElementById('dateerror').className = 'errorshow';
document.getElementById('dateerror').innerHTML="Enter your date of birth";
check=1;
}
else if(y>=time.getFullYear())
{
if(cm>=time.getMonth())
{
if(d>=time.getDay())
{
document.getElementById('dateerror').className ='errorshow';
document.getElementById('dateerror').innerHTML ="Invalid date of birth";
check=1;
}
}
}
else if(m=="April" || m=="June" || m=="September" || m=="November" && d>30)
{
document.getElementById('dateerror').className = 'errorshow';
document.getElementById('dateerror').innerHTML="Invalid date of birth";
check=1;
}
else if(m=="February" && d>29)
{
document.getElementById('dateerror').className = 'errorshow';
document.getElementById('dateerror').innerHTML="Invalid date of birth";
check=1;
}
else if(m=="February" && y%4!=0 && d>28)
{
document.getElementById('dateerror').className = 'errorshow';
document.getElementById('dateerror').innerHTML="Invalid date of birth";
check=1;
}
else
{
document.getElementById('dateerror').className = 'errorhide';
check=0;
}
if(check==1)
{
return false;
}
}
This is one of the best validation script you can get.The important thing is we have added date validation also which is very rare to find.Try it and enjoy.......
You can download the entire script here
No comments:
Post a Comment