MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

Form Validation

Testing for empty fields

An empty form field contains an empty String (i.e., "") as its value. Apart from seeing if the field's value is equal to the empty String, you can also test for an empty field by examining the length of the field's value. Since an empty field will have the empty String as its value, the length of the field's value will be zero.

Consider a page presenting the following form:

Let us assume that this form must have the first name and family name fields completed to be valid.

The HTML for the form is defined in a table. The form is named "order", and has an action to post the input values — replace your@email.address.here with your own email address if you wish to try out this form yourself.

	<FORM NAME=orderform METHOD="post" ACTION="mailto:your@email.address.here" onSubmit="return validateOrderForm()">
      

The form has been defined with an onSubmit event handler. This handler needs to return a Boolean (true/false) value, which, if false, will prevent the form from being submitted. Therefore we need to define a function called validateOrderForm that returns a Boolean value true if the form is correct, and false if it is invalid in some way.

The HTML defining the table

The first row of the table displays First Name and a text input field:

	<tr>
	<td align=right> First name: </td>
	<td>
	<INPUT TYPE="text" NAME="firstName" SIZE=20>
	</td>
	</tr>
      

The text First Name has been right aligned to improve layout and readability of the form. The input field has been named firstName — NAME="firstName"

The second row of the table displays Family Name and a text input field named familyName:

	<tr>
	<td align=right> Family name: </td>
	<td>
	<INPUT TYPE="text" NAME="familyName" SIZE=20>
	</td>
	</tr>
      

The third row of the table displays Telephone number and a text input field named telephone:

	<tr>
	<td align=right> Telephone number: </td>
	<td>
	<INPUT TYPE="text" NAME="telephone" SIZE=20>
	</td>
	</tr>
      

The fourth row of the table displays the two buttons:

	<tr>
	<td>
	<INPUT TYPE="submit" VALUE="Submit this form">
	</td>
	<td>
	<INPUT TYPE="reset" VALUE="Clear form and start again">
	</td>
	</tr>
      

The JavaScript function to validate the form fields

We can test the above HTML using a dummy function that always returns false (so the form is never posted). Such a function could be written as:

	function validateOrderForm()
	{
	alert( "would validate form at this point" );
	// return Boolean valid data status
	return false;
	}
      

When we click the submit button we now see the alert dialogue appear:

To test if the firstName field is empty we can either compare the value of this field with an empty String:

    orderform.firstName.value == ""

or we can test if the length of the value of this field is zero:

    orderform.firstName.value.length == 0;

So if we wish our validateOrderForm() function to return true if the first name field has some value, and false otherwise we could write the function as follows:

	function validate()
	{
	// at this point no invalid fields have been encountered
	var fieldsValid = true;
	// test field firstname
	var firstNameValue = orderform.firstName.value;
	if (firstNameValue.length == 0)
	{
	fieldsValid = false;
	}
	// return Boolean valid fields status
	return fieldsValid;
	}
      

As can be seen above, first the value of the firstName field is retrieved and assigned to a local variable called firstNameValue. Next, the length of this value is tested to see if it is zero. If it is, the Boolean variable fieldsValid is set to false to prevent the form from being submitted by making the function return false. Otherwise the value of this Boolean variable is left alone, and the function returns true.

If the first name field has had a value entered into, you may be informed that the form is about to be posted by the browser with a message such as the following:

Simplifying the code with a new function

The test we wrote for an empty text field is very useful for a page with many fields, so we can write a simple function called isEmpty() to do the test:

	function isEmpty( fieldString )
	{
	if fieldString.length == 0
	return true;
	else
	return false;
	}
      

We can now rewrite the validate() function as follows:

	function validate()
	{
	// at this point no invalid fields have been encountered
	var fieldsValid = true;
	// test field firstname
	if isEmpty( orderform.firstName.value )
	{
	fieldsValid = false;
	}
	// return Boolean valid fields status
	return fieldsValid;
	}
      

Improving user interaction

While this works, the form is currently not very helpful to the user: if they click on the submit button and the first name field empty, nothing happens. At the very least the form should inform the user as to why it is not being submitted. This is easily solved by adding an alert statement, as in the following revised function definition:

	function validate()
	{
	// at this point no invalid fields have been encountered
	var fieldsValid = true;
	// test field firstName
	if ( isEmpty( orderform.firstName.value ) )
	{
	alert( "First name must have a value - form not submitted" );
	fieldsValid = false;
	}
	// return Boolean valid fields status
	return fieldsValid;
	}
      

Now if the submit button is pressed and the firstName field is empty, the form is not submitted, and the user is presented with the following dialog:

Validation of multiple fields

We can now extend our validate function to test the family name field as well:

	function validate()
	{
	// at this point no invalid fields have been encountered
	var fieldsValid = true;
	// test field firstName
	if ( isEmpty( orderform.firstName.value ) )
	{
	alert( "First name must have a value - form not submitted" );
	fieldsValid = false;
	}
	// test field familyName
	if ( isEmpty( orderform.familyName.value ) )
	{
	alert( "Family name must have a value - form not submitted" );
	fieldsValid = false;
	}
	// return Boolean valid fields status
	return fieldsValid;
	}
      

If the user attempts to submit the form with an empty family name:

they will be presented with the following alert dialog and the form will not be posted: