A Beginner's Introduction To Validating User Input In Flex

Several months ago I posted a Flex example that used a form to get a user's input. This form did not include any validation of what the user typed in (that wasn't the intent of the example), but just updated the database. You can check out that example here: /brucephillips/flex/cfobject/cfobject.html. Feel free to enter whatever you want for the phone number and this Flex application will update the record.

Recently, I've been doing some Flex intranet work for our company and one of the Flex applications allows staff to update their address, phone number, and email for the staff directory we publish online. Of course, for this application, validating the user's input prior to trying to update the database is important. So based on what I've learned about validating user input in Flex, I thought I post a short beginner's guide.

My references are:

1. Flex 2 Developer's Guide, Validating Data, http://livedocs.macromedia.com/flex/201/html/validators_093_01.html#110674
2. Flex Quick Starts, Validating Data, http://www.adobe.com/devnet/flex/quickstart/validating_data/
3. Class Validator, http://livedocs.macromedia.com/flex/2/langref/mx/validators/Validator.html
4. Class StringValidator, http://livedocs.macromedia.com/flex/2/langref/mx/validators/StringValidator.html
5. Class EmailValidator, http://livedocs.macromedia.com/flex/2/langref/mx/validators/EmailValidator.html
6. Class PhoneNumberValidator, http://livedocs.macromedia.com/flex/2/langref/mx/validators/PhoneNumberValidator.html

You can view a Flex example that includes a form and validation here:
/flex/formvalidationexample/formvalidationexample.html. Right click on the Flex example to view the source.

Flex comes with numerous validation classes for validating phone numbers, email addresses, string input, credit cards, etc. Reference #1 provides a list of these validators and how to use them. You can look up each validator in the Flex Language Reference (for example, see reference number 5 for the EmailValidator class), where you will find a list of the properties and methods the class provides and further examples on how to use the validator.

For this introduction to validation, I'm just using the StringValidator, PhoneNumberValidator, and EmailValidator. To create a validator component you do the following:

The above code creates a PhoneNumberValidator. The source attribute tells this validator what textInput component it will validate and the property attribute specifies the text attribute of that textInput component. The attribute requiredFieldError stores the message the user will see if he leaves the phoneInput field blank.

The valid and invalid attributes specify what function to call if the validation returns a valid or invalid Event (see reference 3). In this example, I'm calling function handleValid for both cases (valid or invalid event returned by the validator). Here is that function:

If the event type returned is valid, the update button is enabled (initially this button is disabled). If the event type is not valid, then the update button is disabled and an Alert window is generated with the error message. Thus, unless each validator returns a valid event, the update button will not be enabled and the user will not be able to submit the form.

There are many different ways to trigger when the validator validates the user's input. References 1 and 2 discusses alternative methods and provide examples. In my example, I use the default trigger for validation, which is the validator executes when the user moves the focus away from the textInput control. For example, after entering the phone number, the user tabs or clicks on the email field. When the phone number textInput field loses focus, the PhoneNumberValidator executes.

Please post links to more examples of validating user input in Flex, so that we can share what others have learned.