Javascript and Form Validation

What is Form Validation?

Form validation refers to checking form data prior to sending the data to a script for processing.

By catching errors and bad data at this stage, time is saved and server resources are saved. CGI scripts can also be smaller and more focused on processing the data, because they don't need to also include routines to check for bad data or missing data.

When thinking about form validation, there are really two types of validation: data completeness checking and data correctness checking.

Data completeness asks the question: Has data been entered or a selection made?

Data correctness asks the question: Is the data valid and properly formatted?

Our focus is on checking for data completeness.

Implementing Data Completeness Checking with Javascript:

The first step is include a name attribute in your <form> tag

The next step is to include the Javascript logic for checking to see whether a text input field or textarea box has something in it, whether a radio button or checkbox has been selected, and whether a selection has been made in a drop-down menu.

The code for checking each form element is different, because they are all set up a bit differently in terms of how you determine they are empty or unselected. Note that validation requires that you have assigned a name to each element and that the form itself is also named.

Generally speaking, the Javascript is checking whether the value for each element is null or empty.

The code would be as follows (you need to modify this to have the name of the form where it says NAME_OF_FORM and to have the name of the form element where it says NAME_OF_FORM_ELEMENT; these come from the name attributes that you assign):
// Open script and open function

<script language="Javascript" type="text/javascript">
function checkData() {

</script>

In your code you call the checkData function using the onsubmit event handler, which is specified in the <form> tag. If the form was named "example", the <form> tag would be:
<form method="post" action="" name="example" onsubmit="return checkData()">

If you are trying your code in Internet Explorer and it doesn't work, you can click on the icon with the exclamation point, located in the status bar, to see a brief description of the error and to find the line number where the problem occurred.

Always be sure to provide meaningful, focused error messages using language that will be familiar to the user.

Code Example:

A functional example of data completeness checking is available. This is the code in the example:

<html>
<head>
<title>Form Validation Example</title>
<script language="Javascript" type="text/javascript">
function checkData() {
		<!--
		// Checkboxes and Radio Buttons
		var Selected = false;
		for (i = 0; i < example.color.length; i++) {
		if (example.color[i].checked)
		Selected = true;
		}
		if (!Selected) {
		alert("Please specify your favorite color.");
		return (false);
		}

		var Selected2 = false;
		for (i = 0; i < example.classes.length; i++) {
		if (example.classes[i].checked)
		Selected2 = true;
		}
		if (!Selected2) {
		alert("Please indicate at least one class you have taken.");
		return (false);
		}

		// Select Boxes
		if (example.track.selectedIndex <= 0) {
		alert("Please specify your INP track.");
		example.track.focus();
		return (false);
		}

		// Text Input Fields and Textareas
		if (document.example.fname.value == "") {
		alert("Please enter your first name.");
		document.example.fname.focus();
		return false; }

		if (document.example.lname.value == "") {
		alert("Please enter your last name.");
		document.example.fname.focus();
		return false; }

		if (document.example.hobbies.value == "") {
		alert("Please enter at least one hobby of yours.");
		document.example.hobbies.focus();
		return false;
		}
	}
	// -->
</script>
</head>
<body>
<h1>INP Student Profile</h1>
<form method="post" action="" name="example" onsubmit="return checkData()">

First Name: <input type="text" name="fname" id="fname" size="10" maxlength="15" />

<p>Last Name: <input type="text" name="lname" id="lname" size="10" maxlength="15" /></p>

<p>Favorite Color: <input type="radio" name="color" value="blue" /> blue
<input type="radio" name="color" value="green" /> green</p>

<p>Hobbies: <textarea name="hobbies" id="hobbies" rows="3"
 cols="20" wrap="wrap"></textarea></p>

<p>INP Track: <select name="track">
<option>Please choose</option>
<option value="Design">Design</option>
<option value="Technical">Technical</option>
</select></p>

<p>Classes taken: <input type="checkbox" name="classes" value="150" /> 150
<input type="checkbox" name="classes" value="210" /> 210</p>
<p><input type="submit" value="Create My Profile" /></p>
</form>
</body>
</html>

Close Window