News
Forums
Fun & Games
Buy the Book
Search Enter your search terms Submit search form

Book Resources
⊕ Scripts
- All Scripts
- Chapter 1
- Chapter 2
- Chapter 3
- Chapter 4
- Chapter 5
- Chapter 6
- Chapter 7
- Chapter 8
- Chapter 9
- Chapter 10
- Chapter 11
- Chapter 12
- Chapter 13
- Chapter 14
- Chapter 15
- Chapter 16
- Chapter 17
FAQ
Errata
⊕ Excerpts
- Table of Contents
- Sample Chapter
⊕ Where to Learn More
- Sites
- Newsgroups
- Books
⊕ Previous Editions

The Workbench
Articles
Useful Scripts

Chapter 7: Form Handling

Contents:

Select-and-Go Navigation
Changing Menus Dynamically
Making Fields Required
Checking Fields against Each Other
Identifying Problem Fields
Putting Form Validation into Action
Working with Radio Buttons
Setting One Field with Another
Validating Zip Codes
Validating Email Addresses

Return to Chapter 7

To use this script on your own page, click in the text area below, select all, and copy to grab the script. Then, just paste into your own page — and you're done.

Identifying Problem Fields

See it run: Identifying Problem Fields

Script 7.9

This JavaScript highlights the incorrect field's label when it finds an error.

window.onload = initForms;

function initForms() {
	for (var i=0; i< document.forms.length; i++) {
		document.forms[i].onsubmit = function() {return validForm();}
	}
}

function validForm() {
	var allGood = true;
	var allTags = document.getElementsByTagName("*");

for (var i=0; i<allTags.length; i++) {
		if (!validTag(allTags[i])) {
			allGood = false;
		}
	}
	return allGood;

function validTag(thisTag) {
		var outClass = "";
		var allClasses = thisTag.className.split(" ");
	
		for (var j=0; j<allClasses.length; j++) {
			outClass += validBasedOnClass(allClasses[j]) + " ";
		}
	
		thisTag.className = outClass;
	
		if (outClass.indexOf("invalid") > -1) {
			invalidLabel(thisTag.parentNode);
			thisTag.focus();
			if (thisTag.nodeName == "INPUT") {
				thisTag.select();
			}
			return false;
		}
		return true;
		
		function validBasedOnClass(thisClass) {
			var classBack = "";
		
			switch(thisClass) {
				case "":
				case "invalid":
					break;
				case "reqd":
					if (allGood && thisTag.value == "") classBack = "invalid ";
					classBack += thisClass;
					break;
				default:
					if (allGood && !crossCheck(thisTag,thisClass)) classBack = "invalid ";
					classBack += thisClass;
			}
			return classBack;
		}
				
		function crossCheck(inTag,otherFieldID) {
			if (!document.getElementById(otherFieldID)) return false;
			return (inTag.value == document.getElementById(otherFieldID).value);
		}
		
		function invalidLabel(parentTag) {
			if (parentTag.nodeName == "LABEL") {
				parentTag.className += " invalid";
			}
		}
	}
}