CSS Style center

CSS Styles, CSS tips

Portfolio

Forms and E-Mail Validation Example

I have found myself every time looking for ready scripts to save me time in writing scripts.

Forms and Email address validation is one of them, and sometimes it’s hard to find a good script, so i have decided to share the script i use in my sites for validating e-mails and forms.

Two things needed for this, one:

The Javascript code:

var userName 			= document.getElementById("userName");
var siteName 			= document.getElementById("siteName");
var password 			= document.getElementById("password");
var passwordConfirm 	        = document.getElementById("passwordConfirm");
var email 				= document.getElementById("email");
var fullName 			= document.getElementById("fullName");
var phone 				= document.getElementById("phone");
var Emailstr			= document.getElementById("email").value;
var Emailfilter		=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (userName.value == "")
{
alert("Please enter your User name.");
userName.focus();
return false;
}
else if (siteName.value == "")
{
alert("Please enter your Site Name.");
siteName.focus();
return false;
}
else if (password.value == "")
{
alert("Please enter password.");
password.focus();
return false;
}
else if (passwordConfirm.value == "")
{
alert("Please Confirm your password.");
passwordConfirm.focus();
return false;
}
else if (passwordConfirm.value != password.value)
{
alert("Please check your password verification.");
passwordConfirm.focus();
return false;
}
else if (!Emailfilter.test(Emailstr))
{
alert("Please enter correct e-mail");
email.focus();
return false;
}
else if (fullName.value == "")
{
alert("Please enter your Name.");
fullName.focus();
return false;
}
else if (isNaN(phone.value))
{
alert("Please enter only numbers.");
phone.focus();
return false;
}
else if (phone.value == "")
{
alert("Please enter your phone.");
phone.focus();
return false;
}
return true;
}
The Javascript code should be in the head section or he should be in a separate  JS file in order to use this script in different forms.
And the second thing that you will need is the HTML form code:
<body>
<form action="your server side script file" method="post" id="signUpForm" onsubmit="return checkForm(this.form);">
Username: <input type="text" name="userName" id="userName" />
Sitename:  <input type="text" name="siteName" id="siteName" />
Password: <input name="password" id="password" type="password" />
Password Verification: <input type="password" name="passwordConfirm" id="passwordConfirm" />
email: <input type="text" name="email" id="email" />
Full name: <input type="text" name="fullName" id="fullName" />
Phone: <input type="text" name="phone" id="phone" />
<input type="button" value="submit" />
</form>
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>