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.

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.