Example form

On this page, I have an example form and script that checks whether the user has filled in text fields and prints out the values the user filled in. Below I explain the part of the script that checks the text fields.

The example form

This is an example form. I play slightly false here: the form cannot be submitted because my present server doesn't allow CGI. Instead, I print out the values you filled in in the textarea and return false anyway, so the form isn't submitted.

The onSubmit script does two things: it checks whether you have filled in something in the four text boxes and it gathers name and value of all elements you have selected/checked and prints them out in the textarea below.

If you want to know exactly how this script works, please see the source. On this page I'll explain only the bit that checks if the text fields are filled in.

See the Form error messages script for a superior way of informing the user of form validation problems.

Checking text fields

This script checks whether the user has filled in anything in text fields. It ignores check boxes and radio buttons, but it will always ask the user to fill in a select box, even if he has already done so, because a select box always has a value of null. So it's best to use this script only when you want to check text fields.

function checkscript() {
	for (i=0;i<4;i++) {
		box = document.example.elements[i];
		if (!box.value) {
			alert('You haven\'t filled in ' + box.name + '!');
			box.focus()
			return false;
		}
	}
	return true;
}

In this example, I want to check elements 0-3, so I have a variable i that goes from 0 to 3. As you can see, I'm using numbers here instead of names. This is one of the cases in which it's better to use numbers than names.

for (i=0;i<4;i++) {

Then I make a variable box, which accesses the current form element. If I didn't create it, I'd have to write document.forms['example'].elements[i] a couple of times and I'm too lazy for that.

	box = document.example.elements[i];

If the current text field has no value, the user has filled in nothing and we need to do several things.

	if (!box.value) {

First we show an alert that uses the name of the text field. If you keep the names of your text fields logical, the user understands from this alert what text field should be filled in.

		alert('You haven\'t filled in ' + box.name + '!');

As an additional service, we place the focus on the text field so that the cursor is in it and the user can start typing right away. Since all JavaScript browsers support focusing on form fields, we don't need a support detect.

		box.focus()

Finally we return false. The script stops immediately and the form is not submitted. We wait for further user input.

		return false;

If every text field has a value, we return true to show that everything is OK. Function stops, form is submitted and we're ready.

	}
}
return true;