How It Works

Within the body of the page, we create the HTML tags that define our form. Inside our form, which is called form1, we create the three form elements with names txtName, txtAge, and butCheckForm.

You'll see that for the second text box, that is the txtAge text box, we have included the SIZE and MAXLENGTH attributes inside the <INPUT> tag. Setting the SIZE attribute to 3 gives the user an idea of how much text we are expecting, and setting the MAXLENGTH attribute to 3 helps ensure that we don't get too large numbers entered for our age value!

The first text box's onchange event handler is connected to the function txtName_onchange(), the second text box's onblur event handler is connected to the function txtAge_onblur(), and the button's onclick event handler is connected to the function butCheckForm_onclick(). These functions are defined in a script block in the head of the page. We will look at each of them in turn, starting with butCheckForm_onclick().

The first thing we do is define a variable, myForm, and set it to reference the Form object created by our <FORM> tag later in the page.

Doing this reduces the size of our code each time we want to use the form1 object. Instead of document.form1 we can just type myForm. It makes our code a bit more readable and therefore easier to debug, and it saves typing. When we set a variable to be equal to an existing object, we don't (in this case) actually create a new form1 object. Instead we just point our variable to the existing form1 object. So when we type myForm.name JavaScript checks our variable, finds it's actually storing the location in memory of the object form1 and uses that object instead. All this goes on behind the scenes so we don't need to worry about it and can just use myForm as if it was document.form1.

Having got our reference to the Form object, we then use it in an if statement to check whether the value in the text box named txtAge or the text box named txtName actually contains any text.

If we do find an incomplete form, we alert the user. Then in an inner if statement we check which text box was not filled in. We set the focus to the offending text box, so that the user can start filling it in straight away without having to move the focus to it themselves. It also lets the user know which text box our program considers needs filling in. To avoid annoying your users, make sure that text in the page tells them which fields are required.

If the original outer if statement found that the form was complete, then it would let the user know with a thank you message.

In this sort of situation, it's probably more likely that at this point, having validated the form, we'd submit it to the server for processing. We can do this using the Form object's submit() method as we'll see in the chapters on server-side programming.

The next of our three functions is txtAge_onblur(), which is connected to the onblur event of our txtAge text box. The purpose of this function is to check that the string value the user entered into the age box actually consists of number characters.