index.html
<!DOCTYPE html> // represents HTML5<html lang = "en">
<head>
<title>Registration Form using JavaScript</title>
<script src="form.js"></script>
</head>
<body>
<h1>Registration Form using JavaScript</h1>
<body onload="firstfocus();">
<form name ="Registration" method = "post" action = "#" >
User Id : <input type = "text" name = "uid" size = "12" onblur = "uid_validation(5,12)"required><span id = "uid"> </span><br><br>
Password : <input type = "password" name = "pass" size = "12" onblur = "pass_validation(7,12)"required> <span id = "pass"> </span><br><br>
User Name : <input type = "text" name = "uname" onblur = "alpha_only()" required> <br><br>
Address : <textarea rows = '5' cols = '20' name = "address" onblur="alphanumeric()"></textarea> <br><br>
Country : <select name = "country" onblur = "select_country()">
<option selected ="" value = "Default"> (Please Select a Country)</option>
<option value="IND"> India </option>
<option value ="US"> USA </option>
<option value ="UK"> UK </option>
</select>
ZIP Code : <input type = "text" name = "zip" onblur = "number_only()"></input><br><br>
Email : <input type = "text" name = "email" onblur = "email_validate()"></input><br><br>
Sex : <input type = "radio" name = "gender" value = "Male" checked> <span> Male </span>
<input type = "radio" name = "gender" value = "Female"> <span> Female </span><br><br>
Language : <input type = "checkbox" name = "en" value = "en" checked><span> English</span>
<input type = "checkbox" name = "non" value = "non" checked><span> Non English</span><br><br>
Description : <textarea name = "desc" rows = '10' cols = '10'></textarea><br><br>
<input type = "Button" name = "btn" value = "Click" onclick="alert('Form submitted successfully')">
</div>
</body>
</html>
form.js
// After form loads focus will go to User id field.
function firstfocus()
{
var uid = document.registration.userid.focus();
return true;
}
// This function will validate User id.
function userid_validation(mx,my)
{
var uid = document.registration.userid;
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
// Focus goes to next field i.e. Password.
document.registration.passid.focus();
return true;
}
// This function will validate Password.
function passid_validation(mx,my)
{
var passid = document.registration.passid;
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
// Focus goes to next field i.e. Name.
document.registration.username.focus();
return true;
}
// This function will validate Name.
function allLetter()
{
var uname = document.registration.username;
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
// Focus goes to next field i.e. Address.
document.registration.address.focus();
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
// This function will validate Address.
function alphanumeric()
{
var uadd = document.registration.address;
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
// Focus goes to next field i.e. Country.
document.registration.country.focus();
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
// This function will select country name.
function countryselect()
{
var ucountry = document.registration.country;
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
// Focus goes to next field i.e. ZIP Code.
document.registration.zip.focus();
return true;
}
}
// This function will validate ZIP Code.
function allnumeric()
{
var uzip = document.registration.zip;
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
// Focus goes to next field i.e. email.
document.registration.email.focus();
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
// This function will validate Email.
function ValidateEmail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
No comments:
Post a Comment