Recipe 14.6. Validating Form Data

Problem

You want to validate form data before allowing the user to submit it to a server-side script.

Solution

Use the built-in data validation features of the FormController component.

Discussion

Data validation can be an important feature to include in your Flash forms. Often you may have required fields in a form that you want users to fill out before submitting the form data. If they don't fill out the form fields, you'll want to prompt them for that information before allowing them to continue. Furthermore, you may also want to verify that the data being entered matches certain criteria. For example, you may want to make sure that the value entered into a field looks like a valid email address. Or you may want to make sure that users have entered a valid number value.

Although you can write your own data validation scripts, it can require quite a lot of ActionScript code, and it is beyond the scope of this book. However, the FormController component (discussed in Chapter 13) provides built-in data validation features. Using the FormController component, you can make particular form elements required, and you can also verify that entered values match particular patterns such as email or number.

In order to use the data validation features, there are two requirements. You must include a component that can display any messages to the user in your Flash document's library, and you must specify the Validator and Message values in the FormController's elements parameter for each of the form controls to which you want to apply data validation.

There are two types of components that the form controller can use in order to display messages to the user. If you are using Flash Professional, you can add the Alert component to your document's library. The Alert component is available only in the Professional version of Flash, however. Therefore, if you are using the standard version of Flash, you may use the FCBAlert component instead. The FCBAlert component is provided as part of the Flash 8 Cookbook component set (downloadable from http://www.rightstart.com/fcb). Regardless of which component you use, you add the component to the library in the same way: drag an instance of the component from the Components panel onto the stage. Then delete the instance from the stage. Although it may seem somewhat odd to create an instance only to delete it, doing so ensures that the component symbol is copied into the Flash document.

The form controller can apply data validation to specific form controls. For example, you may have some form controls to which you want to ensure that the user actually enters any value, some for which you want to ensure that the user enters a value of a specific type, and others for which you want no data validation. You can apply the data validation settings for each form control by way of the form controller's elements parameter. Each element listed allows you to specify a Validator and a Message value. When no value is specified for Validator (which is the default setting), no data validation is applied to the form control. You may optionally specify any of the following values:

true

A value of true indicates that the user must enter or select some valid value for the form control. In the case of text fields, text inputs, and text areas, a value of true requires the user to enter some text. With checkboxes, the user is then required to select the checkbox (useful in situations where the user must check a box to accept a user agreement). For RadioButton groups, the user is then required to select one of the radio buttons in the group. When used with date form controls, the user must make a date selection. And when used with combo boxes and lists, the user must select at least one value in which the data is not equal to1. The value of1 allows you to add an initial item to your menus that does not count as a valid selection. For example, you may want a combo box's initial item to inform the reader as to what they are selecting (e.g., Select a Country), yet not want that initial item to count as a valid selection. Therefore you can assign1 to that item's data value.

email

Checks to make sure that the value that is entered follows the pattern for a valid email address. This validation does not ensure that email can be delivered to the address, but it does make sure the user has at least entered text that appears to be a valid email.

number

Checks to make sure that the value is a number.

Any regular expression

Regular expressions are beyond the scope of this book (for more, see Friedl, Mastering Regular Expressions, O'Reilly). However, if you are familiar with regular expressions, you can use this feature to create a specific pattern that the value should follow. A repository of many regular expressions that you may find useful is http://www.regxlib.com.

For Message, you should specify the text that should appear to the user in the event that he attempts to submit the form without filling out one of the elements properly. For example, if you have a text input for which you have set Validator to email, you may want to use a Message value such as "Please ensure that you have entered a valid email address before submitting the form." The Message value appears in the Alert or FCBAlert window that opens automatically if a form control's data is not properly validated.

You may find it helpful to modify the email submission form application from Recipe 13.18 so that it validates the information that the user enters. You can do so by completing the following steps: