Chapter 11: Form Validation

This chapter explains how you can call up built-in JavaScript functions to validate the input fields in your form, and how you can add your own validation functions.

For step-by-step instructions on how to use the features described in this chapter, see the Help under Programming > CGI-based Applications > Form Designer > JavaScript and Event Handling.

Validation Functions Supplied

Built-in validation functions are available for the following HTML controls:

• Text input
• Text area
• Password

You can specify whether a field is required and whether you want a prompt displayed on the status line, as well as in a pop-up. The status line prompt is displayed all the time the field has focus, while the pop-up prompt is displayed only when the field loses focus and if the validation fails. You can change the text of the prompt.

The validation function for a field is executed twice:

• When the contents of the field change
• When the form is submitted

The following validation functions are supplied with Net Express:

Validation Examples

This section contains three examples of invoking validation. These examples assume that you have an .htm file open that contains one or more fields of the type that can have validation applied to them: text input fields, text area fields and password fields.

The Validation dialog box is shown below.

Figure 11-1: Validation Dialog Box

Example 1: To Validate an Optional Decimal Number

To invoke the decimal number validation function and make the field optional:

1. Select the field that you want to be validated.
2. Right-click and select Validation... from the popup menu (or select Validation... from the Edit menu). The Validation dialog box appears.
3. Click Number (decimal) from the Validation list.
4. Click Required field No. This indicates that the field is optional.
5. The prompt text associated with the decimal number validation routine is shown in Prompt. If you want to you can edit the text. If you want the prompt to appear on the status line, click Status line prompt.
6. Click OK.

The effect of invoking this routine is that the end-user can choose to leave the field blank, but if they enter any value that is not a decimal number, they are prompted to return to the field and enter a valid value.

Example 2: To Validate a Mandatory Visa Card Number

To invoke the Visa card number validation function and make the field mandatory:

1. Select the field that you want to be validated.
2. Right-click and select Validation... from the popup menu (or select Validation... from the Edit menu). The Validation dialog box appears.
3. Click Visa card number from the Validation list.
4. Click Required field Yes. This indicates that the field is mandatory.
5. The prompt text associated with the Visa card number validation function is shown in Prompt. If you want to you can edit the text. If you want the prompt to appear on the status line, click Status line prompt.
6. Click OK.

The effect of invoking this routine is that the end-user must enter a valid value. If they do not, they are prompted to return to the field and enter a valid value.

Example 3: To Check that a Mandatory Field is Present

Even if none of the supplied validation functions are appropriate, you can still use the Validation dialog box to specify that a field is mandatory. To do this:

1. Select the field that you want to be mandatory.
2. Right-click and select Validation... from the popup menu (or select Validation... from the Edit menu). The Validation dialog box appears.
3. Click None from the Validation list.
4. Click Required field Yes. This indicates that the field is mandatory.
5. The prompt text associated with no validation is shown in Prompt. If you want to you can edit the text. If you want the prompt to appear on the status line, click Status line prompt.
6. Click OK.

The effect of invoking this routine is that the end-user must enter a value. If they do not, they are prompted to return to the field and enter a value.

Adding Your Own Validation Functions

You can write your own validation functions for any text input, text area or password fields for which the supplied functions are not appropriate. To do this you need a good grasp of JavaScript or JScript; see the references in the chapter Client-side Programming for further details.

You have a choice of two ways of incorporating the extra validation into your form:

• You can include an event handler embedded in the form to validate a field, just like code to perform any other function. You would normally call the function on the onchange event, and possibly also on the form's onsubmit event. This approach is fine if the necessary validation is a one-off requirement.
• You can write a validation function and add it to the functions supplied with Net Express. The advantage with this approach is that the function is then available for fields in other input forms.

  Each of the supplied routines is stored in a .js file, and referenced from another file called validate.cpt in the bin directory, so you need both to create your code and store it in a .js file, and to update the validate.cpt file. You can create your code from scratch, either in a text editor or in the Script Assistant, or you can copy one of the built-in routines and edit it to suit your requirements. Step-by-step instructions for the copy and edit approach can be found in the online help; Click Help > Help Topics, then on the Contents tab click Programming > CGI-based Applications > Form Designer > JavaScript and Event Handling > Overview - Form Validation > How to > Add your own validation function.

Copyright © 2006 Micro Focus (IP) Ltd. All rights reserved.