Exercise 3.6: Validating form data

In this exercise you will use Flex framework validation classes to validate a form (see Figure 1). You will start by validating a single field and then learn how to validate an entire form using ActionScript.

In this exercise, you will learn how to:

• Add help content to the Spark Form container
• Create a PhoneNumberValidator instance
• Trigger a validator using an event
• Suppress automatic validation
• Use the validate() method
• Trigger multiple validations

In this section you will add an asterisk to all form fields to indicate that the fields are required.

1. Download the ex3_06_starter.zip file if you haven't already and extract the ex3_06_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex3_06_starter.fxp file.
4. From the Package Explorer view, expand the components package and open the VehicleRequestForm.mxml file.
5. Within the Form container, locate the FormItem block that nests the mobilePhone TextInput control.
6. To the FormItem container, add the required property with a value of true.

7. Save the file and run the application.

   You should see an asterisks next to the Mobile Phone field (see Figure 2).

In this section, you will add help content to provide context and instructions for using a form item.

1. Return to the VehicleRequestForm.mxml file in Flash Builder.
2. Within the Mobile Phone FormItem container, above the TextInput control, add a helpContent tag block.

   Note that you can put anything you want in the helpContent container. In this exercise, you will add a Label control and a Button control.

3. Add a Label control within the helpContent container.
4. Assign the Label control a text property with a value of (ex. 555-555-5555).
5. Under the Label control in the helpContent tag block, add a Button control with a label property of ?, a width property that has a value of 30, and an x property that has a value of 120.

6. Save the file.
7. Run the application.

   You should see that the Label and Button controls have been added to the form, but notice that neither control lines up on the same horizontal baseline as the Mobile Phone field (see Figure 3).

8. Return to the VehicleRequestForm.mxml file.
9. To both the Label and Button controls, add the baseline property with a value of 24.

10. Save the file and run the application.

    You should see that the Label and Button controls are now aligned properly with the Mobile Phone field (see Figure 4).

In this section you will create a PhoneNumberValidator instance that will be used to validate the Mobile Phone field of the sample application.

1. Return to the VehicleRequestForm.mxml file in Flash Builder.
2. Locate the Declarations block.
3. Within the tags, below the DateTimeFormatter, add a PhoneNumberValidator instance.

4. To the PhoneNumberValidator validator, add the id property with a value of mobileValidator.

5. Save the file.

In this section you will use a Button control's click event to trigger the validation of the Mobile Phone field.

1. Within the Declarations block, to the PhoneNumberValidator instance, add the source property and bind its value to the mobilePhone TextInput control.

2. Add the property property with a value of text.

3. Add the trigger property with a value that is bound to the submitButton Button control.

4. Add the triggerEvent property set to click.

5. Save the file.
6. Run the application.
7. Click the Submit Request button.

   You should see a red border appear around the mobilePhone TextInput control. You should also see that the required indicator changes to the error indicator and the contents of the helpContent container is replaced with text telling you the field is required (see Figure 5).

In this section you will remove the trigger event from the PhoneNumberValidator instance.

1. Return to Flash Builder
2. Locate the PhoneNumberValidator instance.
3. From the PhoneNumberValidator, delete the trigger property and value.
4. Change the value of the triggerEvent property to an empty string.

5. Save the file.

In this section you will validate the Mobile Phone field with ActionScript using the validate() method.

1. Below the init() function, create a private function named validatePhones() that has a return type of void.

2. Within the validatePhones() function, create a local variable named event that is data typed as a ValidationResultEvent.

   Note that if you use the content assist tool to assign the data type, Flash Builder generates the corresponding import statement. Otherwise you must add it manually.

3. Assign the event variable to call the mobileValidator PhoneNumberValidator instance's validate() method and append a semicolon.

4. Locate the FormItem container with the nested Button control.
5. To the Button control, add the click event with a value of the validatePhones() event handler.

6. Save the file.
7. Run the application.
8. Click the Submit Request button.

   You should see that the application behaves exactly as it did in Figure 5.

In this section, you will use ActionScript and Flex validators to validate both Phone fields in the Company Vehicle Request component at once.

1. Return to the VehicleRequestForm.mxml in Flash Builder.
2. Within the Declarations block, copy the PhoneNumberValidator instance and paste a copy below the first.

3. For the second PhoneNumberValidator instance, change the id value to officePhoneValidator and bind the source value to the phone TextInput control.

4. Locate the Script block.
5. Create a new import statement to import the mx.validators.Validator package.

6. Locate the validatePhones() function.
7. Within the validatePhones() function, delete the event variable and its value.
8. Within the validatePhones() function, declare a variable named validationArray and data type to the Array class.

9. Assign the validationArray variable to call the Validator.validateAll() method.

10. Within the call to the Validator.validateAll() method, use array brackets to create an array of validators. List the mobileValidator and the officePhoneValidator  instances for validation.

11. Save the file and run the application.
12. From the DropDownList control, select an employee.
13. Remove the last digit from the Office Phone number.
14. Click the Submit Request button.

Both TextInput controls turn red and a message displays next to the Office Phone field indicating the error as shown in Figure 6.

In this exercise you learned how to create a PhoneNumberValidator instance and use it to validate a form field upon a button click. In the next exercise you will populate a ColumnChart control bound to value object instances stored in the employees ArrayCollection instance.