Here is the Example of Form Validation using javascript :
<html>
<head>
<title>Recipes 8.2, 8.3, and 8.4</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script type="text/javascript">
// validates that the field value string has one or more characters in it
function isNotEmpty(elem) {
var str = elem.value;
var re = /.+/;
if(!str.match(re)) {
alert("Please fill in the required field.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
//validates that the entry is a positive or negative number
function isNumber(elem) {
var str = elem.value;
var re = /^[-]?\d*\.?\d*$/;
str = str.toString();
if (!str.match(re)) {
alert("Enter only numbers into the field.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
return true;
}
// validates that the entry is 16 characters long
function isLen16(elem) {
var str = elem.value;
var re = /\b.{16}\b/;
if (!str.match(re)) {
alert("Entry does not contain the required 16 characters.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
// validates that the entry is formatted as an e-mail address
function isEMailAddr(elem) {
var str = elem.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Verify the e-mail address format.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
// validate that the user made a selection other than default
function isChosen(select) {
if (select.selectedIndex == 0) {
alert("Please make a choice from the list.");
return false;
} else {
return true;
}
}
// validate that the user has checked one of the radio buttons
function isValidRadio(radio) {
var valid = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
}
alert("Make a choice from the radio buttons.");
return false;
}
function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
elem.focus();
elem.select();
}
// batch validation router
function validateForm(form) {
if (isNotEmpty(form.name1)) {
if (isNotEmpty(form.name2)) {
if (isNotEmpty(form.eMail)) {
if (isEMailAddr(form.eMail)) {
if (isChosen(form.continent)) {
if (isValidRadio(form.accept)) {
return true;
}
}
}
}
}
}
return false;
}
</script>
</head>
<body>
<h1>Form Validations</h1>
<hr />
<form method="GET" action="cgi-bin/register.pl" name="sampleForm"
onsubmit="return validateForm(this)">
First Name:
<input type="text" size="30" name="name1" id="name1" onchange="isNotEmpty(this)" />
<br>
Last Name:
<input type="text" size="30" name="name2" id="name2" onchange="isNotEmpty(this)" />
<br>
E-mail Address:
<input type="text" size="30" name="eMail" id="eMail" onchange="if (isNotEmpty(this)) {isEMailAddr(this)}" />
<br>
Your Region:
<select name="continent" id="continent">
<option value="" selected>Choose One:</option>
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Australia">Australia/Pacific</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<br>
Licensing Terms:
<input type="radio" name="accept" id="accept1" value="agree" />I agree
<input type="radio" name="accept" id="accept2" value="refuse" />I do not agree
<br>
<input type="reset" /> <input type="submit" />
</form>
</body>
</html>
Output :
<html>
<head>
<title>Recipes 8.2, 8.3, and 8.4</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script type="text/javascript">
// validates that the field value string has one or more characters in it
function isNotEmpty(elem) {
var str = elem.value;
var re = /.+/;
if(!str.match(re)) {
alert("Please fill in the required field.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
//validates that the entry is a positive or negative number
function isNumber(elem) {
var str = elem.value;
var re = /^[-]?\d*\.?\d*$/;
str = str.toString();
if (!str.match(re)) {
alert("Enter only numbers into the field.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
return true;
}
// validates that the entry is 16 characters long
function isLen16(elem) {
var str = elem.value;
var re = /\b.{16}\b/;
if (!str.match(re)) {
alert("Entry does not contain the required 16 characters.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
// validates that the entry is formatted as an e-mail address
function isEMailAddr(elem) {
var str = elem.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Verify the e-mail address format.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
// validate that the user made a selection other than default
function isChosen(select) {
if (select.selectedIndex == 0) {
alert("Please make a choice from the list.");
return false;
} else {
return true;
}
}
// validate that the user has checked one of the radio buttons
function isValidRadio(radio) {
var valid = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
}
alert("Make a choice from the radio buttons.");
return false;
}
function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
elem.focus();
elem.select();
}
// batch validation router
function validateForm(form) {
if (isNotEmpty(form.name1)) {
if (isNotEmpty(form.name2)) {
if (isNotEmpty(form.eMail)) {
if (isEMailAddr(form.eMail)) {
if (isChosen(form.continent)) {
if (isValidRadio(form.accept)) {
return true;
}
}
}
}
}
}
return false;
}
</script>
</head>
<body>
<h1>Form Validations</h1>
<hr />
<form method="GET" action="cgi-bin/register.pl" name="sampleForm"
onsubmit="return validateForm(this)">
First Name:
<input type="text" size="30" name="name1" id="name1" onchange="isNotEmpty(this)" />
<br>
Last Name:
<input type="text" size="30" name="name2" id="name2" onchange="isNotEmpty(this)" />
<br>
E-mail Address:
<input type="text" size="30" name="eMail" id="eMail" onchange="if (isNotEmpty(this)) {isEMailAddr(this)}" />
<br>
Your Region:
<select name="continent" id="continent">
<option value="" selected>Choose One:</option>
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Australia">Australia/Pacific</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<br>
Licensing Terms:
<input type="radio" name="accept" id="accept1" value="agree" />I agree
<input type="radio" name="accept" id="accept2" value="refuse" />I do not agree
<br>
<input type="reset" /> <input type="submit" />
</form>
</body>
</html>
Output :
