Form Validation

[Niño Angelo Lapura]

<style type="text/css">

#passwordStrength{
height:3px;
display:block;
float:left;
}

.strength0{
width:157px;
background:#cccccc;
}

.strength1{
width:157px;
background:#FF0000;
}

.strength2{
width:157px;
background:#FF9900;
}

.strength3{
width:157px;
background:#FFFF00;
}

.strength4{
background:#33CC33;
width:157px;
}

.strength5{
background:#0066FF;
width:157px;
}

</style>

<script type="text/javascript">

function passwordStrength(password)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";

var score = 0;

//if password bigger than 6 give 1 point
if (password.length > 6)
score++;

//if password has both lower and uppercase characters give 1
point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) )
score++;

//if password has at least one number give 1 point
if (password.match(/\d+/))
score++;

//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )
score++;

//if password bigger than 12 give another 1 point
if (password.length > 12)
score++;

document.getElementById("passwordDescription").innerHTML =
desc[score];
document.getElementById("passwordStrength").className = "strength" +
score;
}

function validateEmailAdd(email)
{
var val = new Array();

if (email.length < 5)
document.getElementById("emailValidity").innerHTML = '<font
color="red">Invalid</font>';
if ( email.match(/.+@.*\...+/) )
document.getElementById("emailValidity").innerHTML = '<font
color="green">Valid</font>';

}

function passwordMatch()
{
var y = document.getElementById("pass").value;
var z = document.getElementById("pass2").value;

if (z.length == 0)
document.getElementById("pmatch").innerHTML = "";
else if (z == y)
document.getElementById("pmatch").innerHTML = '<font
color="green">Password match</font>';
else if (z != y)
document.getElementById("pmatch").innerHTML = '<font
color="red">Password not match</font>';
}

function chkUsernameChars(username)
{
if (username.length < 4)
document.getElementById("usernameValidity").innerHTML = '<font
color="red">Atleast 4 charaters</font>';
else if (username.length > 3)
document.getElementById("usernameValidity").innerHTML = '<font
color="green">Available</font>';
}

function checkBlanks()
{
var a = document.getElementById("user").value;
var b = document.getElementById("name").value;
var c = document.getElementById("surname").value;
var d = document.getElementById("email").value;
var e = document.getElementById("pass").value;
var f = document.getElementById("pass2").value;

if ((a.length < 4) || (a == ""))
document.getElementById("uname").innerHTML = '<font color="red">*</
font>';
if (b == "")
document.getElementById("fname").innerHTML = '<font color="red">*</
font>';
if (c == "")
document.getElementById("lname").innerHTML = '<font color="red">*</
font>';
if ((d == "") || (! d.match(/.+@.*\...+/)))
document.getElementById("eaddr").innerHTML = '<font color="red">*</
font>';
if (e == "")
document.getElementById("pword").innerHTML = '<font color="red">*</
font>';
if ((f == "") || (e != f))
document.getElementById("pword2").innerHTML = '<font color="red">*</
font>';
if (((a.length < 4) || (a == "")) || (b == "") || (c == "") || (d ==
"") || (! d.match(/.+@.*\...+/)) || (e == "") || (f == "") || (f !=
e))
{
document.getElementById("please").innerHTML = '<font color="red">All
fields are required. Please fill up the fields marked with *
correctly.</font>';
return false;
}
return true;
}

function chkFNameChars(name)
{
if (name.length < 2)
document.getElementById("fnameChars").innerHTML = '<font
color="red">At least 2 characters</font>';
else
document.getElementById("fnameChars").innerHTML = '<font
color="green">Ok</font>';
}

function chkLNameChars(name)
{
if (name.length <2)
document.getElementById("lnameChars").innerHTML = '<font
color="red">At least 2 characters</font>';
else
document.getElementById("lnameChars").innerHTML = '<font
color="green">Ok</font>';
}

</script>


<h1>Form Validation</h1>
<hr />
<form method="post" action="" id="user_registration"
name="user_registration" onSubmit="return checkBlanks()">

<div id="please"></div>

<table>
<tr><td><label for="user">Username<div id="uname"></div></
label></td><td><input type="text" name="user" id="user" maxlength=20
onkeyup="chkUsernameChars(this.value)" /></td><td><div
id="usernameValidity"></div></td></tr>
<tr><td><label for="name">First Name<div id="fname"></div></label></
td><td><input type="text" name="name" maxlength=20 id="name"
onkeyup="chkFNameChars(this.value)" /></td><td><div id="fnameChars"></
div></td></tr>
<tr><td><label for="surname">Last Name<div id="lname"></div></
label></td><td><input type="text" name="surname" maxlength=20
id="surname" onkeyup="chkLNameChars(this.value)" /></td><td><div
id="lnameChars"></div></td></tr>
<tr><td><label for="email">E-mail<div id="eaddr"></div></label></
td><td><input type="text" name="email" id="email" maxlength=50
onkeypress="validateEmailAdd(this.value)" /></td><td><div
id="emailValidity"></div></td></tr>
<tr><td><label for="pass">Password<div id="pword"></div></label></
td><td><input type="password" name="pass" id="pass" maxlength=20
onkeyup="passwordStrength(this.value)" /><div
id="passwordDescription">Password Strength</div><div
id="passwordStrength" class="strength0"></div></td></tr>
<tr><td><label for="pass2">Confirm Password</div><div id="pword2"></
div></label></td><td><input type="password" name="pass2" maxlength=20
id="pass2" onkeyup="passwordMatch()" /></td><td><div id="pmatch"></
td></tr>
<!-- <tr><td><label for="bday">Birthday</label></td></tr> -->
<tr><td></td><td><input type="submit" name="submit" id="submit"
value="Register"></td></tr>
</table>
</form>
<hr />

<script type="text/javascript">

</script>

<script type="text/javascript">

</script>