JavaScript Form Validation

Jump to: navigation, search
Categories » Programming » Web Programming » JavaScript » JavaScript Form Validation
File:JS Validator.png
Sample error message

This is some code I wrote to facilitate simple form validation. All it does it make sure there is something entered in the field. It does not test for email address format, etc.

Features

ToDo

Usage

Near the top of the page

<script language="javascript" type="text/javascript" src="validation.js"></script>
<script language="javascript" type="text/javascript">
// Form Validation
val = new Validate();
 
// Enter the list of items that need to be checked:
// example: val.add('firstname','You must enter your first name.');
val.add('product1','Please enter the product you are requesting a price change for');
 
val.addGroup('Price Change 1','product1','Please enter the product you are requesting a price change for');
val.addGroup('Price Change 1','5county1','Please enter your 5 County Number');
val.addGroup('Price Change 1','companycost1','Please enter your Company Cost');
val.addGroup('Price Change 1','retailprice1','Please enter your Retail Price');
val.addGroup('Price Change 1','retailinstalledprice1','Please enter your Retail/Installed Price');
val.addGroup('Price Change 1','cwceprice1','Please enter your 5CW/5CE Price');
 
val.addGroup('Price Change 2','product2','Please enter the product you are requesting a price change for');
val.addGroup('Price Change 2','5county2','Please enter your 5 County Number');
val.addGroup('Price Change 2','companycost2','Please enter your Company Cost');
val.addGroup('Price Change 2','retailprice2','Please enter your Retail Price');
val.addGroup('Price Change 2','retailinstalledprice2','Please enter your Retail/Installed Price');
val.addGroup('Price Change 2','cwceprice2','Please enter your 5CW/5CE Price');
</script>

Form tag

<form id="form1" name="form1" method="post" action="/php/contact/mail.php" onSubmit="return val.check()">

validation.js

function Validate() {
	this.itemArray = new Array();
	this.itemGroups = new Object();
	this.add = Validate_Add;
	this.addGroup = Validate_AddGroup;
	this.check = Validate_Check;
}
 
function Validate_Add(formitem,errortext) {
	this.itemArray.push(Array(formitem,errortext));
}
 
function Validate_AddGroup(formgroup,formitem,errortext) {
	if (!isObject(this.itemGroups[formgroup])) this.itemGroups[formgroup] = new Object();
	this.itemGroups[formgroup][formitem] = errortext;
}
 
function Validate_Check() {
	var error_list = new Array();
	var error_string = '';
	var ele;
	for (i=0;i<this.itemArray.length;i++) {
		if (!Validate_CheckTheItem(this.itemArray[i][0] + '_0_value'))	error_list.push(this.itemArray[i][1]);
 
	}
	if (error_list.length > 0) {
		for (i=0;i<error_list.length;i++) {
			error_string += ' - ' + error_list[i] + '\n';
		}
	}
	for (var theGroup in this.itemGroups) {
		// Determine if the group is "active" or not
		// If one item in the group has content, all must have content
		var GroupIsActive = false;
		var tmpErrors = new Array();
		for (var theItem in this.itemGroups[theGroup]) {
			if (Validate_CheckTheItem(theItem + '_0_value')) {
				GroupIsActive = true;
			}
			else {
				tmpErrors.push(this.itemGroups[theGroup][theItem]);
			}
		}
		if ((GroupIsActive) && (tmpErrors.length > 0)) {
			error_string += '\nIn the '+theGroup+' group:\n';
			for (i=0;i<tmpErrors.length;i++) {
				error_string += ' - ' + tmpErrors[i] + '\n';
			}
		}
	}
 
 
	if (error_string != '') {
		alert('Please correct the following errors:\n'+error_string);
		return false;
	}
 
	else return true;
}
 
 
function Validate_CheckTheItem(itemName) {
 
	ele = document.getElementById(itemName);
	if (ele) {
		if ((ele.value == '') || (ele.value == null)) {
			return false; //error_list.push(this.itemArray[i][1]);
		}
	}
	else {
		ele = document.getElementsByName(itemName);
		if (ele.length > 0) {
			if (ele.length == 1) {
				if ((ele[0].value == '') || (ele[0].value == null)) {
					return false; //error_list.push(this.itemArray[i][1]);
				}
			}
			else {
				have_selected_item = false;
				for (j=0;j<ele.length;j++)	if (ele[j].checked) have_selected_item = true;
				if (!have_selected_item) return false; //error_list.push(this.itemArray[i][1]);
			}
		}
	}
	// If we made it this far...
	return true;
}
 
 
function isObject(a) {
    return (a && typeof a == 'object') || isFunction(a);
}
function isFunction(a) {
    return typeof a == 'function';
}
Personal tools
Namespaces
Variants
Actions
Navigation
Categories
Toolbox