Introduction
I this article I explain how to validate a registration form using a JavaScript function. The registration form fields are validated using a JavaScript function. In this form I am using textboxes, a dropdown list, a text area and a checkbox for validation from a JavaScript function and using some extra scripting like CSS and HTML for designing the form.
Example
This is a CSS file; save it as "form.css":
h2{
margin-left: 50px;
color: Automatic;
margin-top: 0px;
text-Align: Center;
}
form li
{
list-style: none;
margin-bottom: 5px;
}
form ul li label
{
float: left;
clear: left;
width: 265px;
text-align: right;
margin-right: 10px;
font-family:Arial;
font-size:10px;
}
form ul li input, select, span
{
float: left;
margin-bottom: 10px;
border: 1px solid maroon;
}
form textarea
{
float: left;
width: 250px;
height: 80px;
}
[type="submit"]
{
clear: left;
margin: 20px 0 0 300px;
font-size:10px
}
This is a JavaScript file to be saved as "jsvalidation.js." This file validates using a JavaScript function using field_Id for creating the function. The JavaScript function calls the onblur event.
You can try it for validation, use this code.
function firstfocus()
{
var uid = document.registration.username.focus();
return true;
}
function username_validation(mw,my)
{
var uid = document.registration.username;
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mw)
{
alert("Please enter username/minimum character "+mw+" to "+my);
uid.focus();
return false;
}
document.registration.passwrd.focus();
return true;
}
function passwrd_validation(mv,my)
{
var passwrd = document.registration.passwrd;
var passwrd_len = passwrd.value.length;
if (passwrd_len == 0 ||passwrd_len >= my || passwrd_len < mv)
{
alert("Please enter Password/minimum password "+mv+" to "+my);
passwrd.focus();
return false;
}
document.registration.username.focus();
return true;
}
function allLetter()
{
var uname = document.registration.username;
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
document.registration.address.focus();
return true;
}
else
{
alert('Username only character');
uname.focus();
return false;
}
}
function alphanumeric()
{
var uadd = document.registration.address;
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
document.registration.country.focus();
return true;
}
else
{
alert('Address only alphanumeric');
uadd.focus();
return false;
}
}
function countryselect()
{
var ucountry = document.registration.country;
if(ucountry.value == "Default")
{
alert('Please select your country');
ucountry.focus();
return false;
}
else
{
document.registration.zip.focus();
return true;
}
}
function allnumeric()
{
var uzip = document.registration.zip;
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
document.registration.email.focus();
return true;
}
else
{
alert('ZIP Code only numeric');
uzip.focus();
return false;
}
}
function ValidateEmail()
{
var uemail = document.registration.email;
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
document.registration.desc.focus();
return true;
}
else
{
alert("Invalid email address!");
uemail.focus();
return false;
}
}
This is a HTML file; save it as "Registration.php." In this form I used the events Onload, Onblur, Onclick.
<meta charset="utf-8">
<title>Registration Form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Field label form validation using a sample registration form. " />
<link rel='stylesheet' href='form.css' type='text/css' />
<script src="jsvalidation.js"></script>
</head>
<body bgcolor="#E7DEDC"onload="firstfocus();">
<h2>Registration Form</h2>
<form name='registration'">
<ul>
<li><label for="username">Username:</label></li>
<li><input type="text" name="username" size="12" onblur="username_validation(6,12)"/></li>
<li><label for="passwrd">Password:</label></li>
<li><input type="password" name="passwrd" size="12" onblur="passwrd_validation(6,12)"/></li>
<li><label for="user">Name:</label></li>
<li><input type="text" name="user" size="37" onblur="allLetter()"/></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="37" onblur="alphanumeric()"/></li>
<li><label for="country">Country:</label></li>
<li><select name="country" onblur="countryselect()">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" size="12" onblur="allnumeric()"/></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="37" onblur="ValidateEmail()" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="sex" value="Male" checked /><span>Male</span></li>
<li><input type="radio" name="sex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc" cols"5"></textarea></li>
<li><input type="submit" name="submit" value="Submit" onclick="alert('Form submitted successfully')" /></li>
</ul>
</form>
</body>
Output
Sharad GuptaPosted May 29, 2013, 6:38 AM
nice one vinod, it is really useful for projects.