Program:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<script type="text/javascript">
function formValidator() {
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var pass = document.getElementById('pass');
var addr = document.getElementById('addr');
var mobileno = document.getElementById('mobileno');
if (notEmpty(firstname, "First name cannot be null")) {
if (isAlphabet(firstname, "Please enter only letters for your First name")) {
if (lengthRestriction(firstname, 6)) {
if (isAlphabet(lastname, "Please enter only letters for your Last name")) {
if (emailValidator(email, "Please enter a valid email address")) {
if (lengthRestriction(pass, 6)) {
if (isAlphanumeric(pass, "Please enter numbers and letters only for password")) {
if (notEmpty(addr, "Please enter the address")) {
if (isNumeric(mobileno, "Please enter a valid mobile number")) {
if (lengthRestriction1(mobileno, 10, 10)) {
return true;
}
}
}
}
}
}
}
}
}
}
return false;
}
function notEmpty(elem, helperMsg) {
if (elem.value.length === 0) {
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
function isNumeric(elem, helperMsg) {
var numericExpression = /^[0-9]+$/;
if (elem.value.match(numericExpression)) {
return true;
} else {
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (elem.value.match(alphaExp)) {
return true;
} else {
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg) {
var alphaExp = /^[0-9a-zA-Z]+$/;
if (elem.value.match(alphaExp)) {
return true;
} else {
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min) {
var uInput = elem.value;
if (uInput.length >= min) {
return true;
} else {
alert("Please enter minimum " + min + " characters");
elem.focus();
return false;
}
}
function lengthRestriction1(elem, min, max) {
var uInput = elem.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
alert("Please enter exactly " + min + " digits");
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg) {
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,4}$/;
if (elem.value.match(emailExp)) {
return true;
} else {
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body bgcolor="#E4F0F8">
<center>
<font color="blue" size="6" face="arial">Registration Form</font>
</center><br />
<form onsubmit="return formValidator()" action="right.html">
First Name (Minimum 6 characters) <font color="red">*</font><br/>
<input type="text" id="firstname" /><br/><br/>
Last Name <font color="red">*</font><br/>
<input type="text" id="lastname" /><br/><br/>
Email Address <font color="red">*</font><br/>
<input type="text" id="email" /><br/>
<font color="red">(One e-mail ID only)</font><br />
<font color="blue">e.g. smith@hotmail.com</font><br /><br/>
Password (Minimum 6 characters) <font color="red">*</font><br/>
<input type="password" id="pass" /><br/><br/>
Address <font color="red">*</font><br/>
<textarea rows="2" cols="20" id="addr"></textarea><br/><br/>
Mobile No <font color="red">*</font><br/>
<input type="text" id="mobileno" /><br/><br/>
Gender:
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female<br/><br/>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
