Prerequisite knowledge

 

User level
Beginning
Required products
Flash Builder 4.7 Premium (Download trial)
Sample files
ex5_03_starter.zip
 
 

Requirements

Prerequisite knowledge

User level

Beginning

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.
 
Preview the application.

Figure 1. Preview the application.

In this exercise, you will learn how to:
 

 
Add required indicators

 

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.
<s:FormItem label="Mobile Phone:" required="true"> <s:TextInput id="mobilePhone"/> </s:FormItem>
  1. Save the file and run the application.
    You should see an asterisks next to the Mobile Phone field (see Figure 2).
     
Run the application to see the asterisk next to the Mobile Phone field.

Figure 2. Run the application to see the asterisk next to the Mobile Phone field.

 
Add help content to the Spark Form container

 

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.
<s:helpContent> <s:Label text="(ex. 555-555-5555)"/> <s:Button label="?" width="30" x="120"/> </s:helpContent>
  1. Save the file.
  2. 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).
     

Figure 3. The new Label and Button controls in the helpContent container.

  1. Return to the VehicleRequestForm.mxml file.
  2. To both the Label and Button controls, add the baseline property with a value of 24.
<s:helpContent> <s:Label text="(ex. 555-555-5555)" baseline="24"/> <s:Button label="?" width="30" x="120" baseline="24"/> </s:helpContent>
  1. 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).
     
The helpContent container is now aligned with the Mobile Phone field.

Figure 4. The helpContent container is now aligned with the Mobile Phone field.

 
Create a PhoneNumberValidator instance

 

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.
<fx:Declarations> <s:DateTimeFormatter id="requestDateFormatter" formatString="MM-dd-yyyy"/> <mx:PhoneNumberValidator /> </fx:Declarations>
  1. To the PhoneNumberValidator validator, add the id property with a value of mobileValidator.
<mx:PhoneNumberValidator id="mobileValidator"/>
  1. Save the file.

 
Trigger validation with events

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.
<mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}"/>
  1. Add the property property with a value of text.
<mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}" property="text"/>
  1. Add the trigger property with a value that is bound to the submitButton Button control.
<mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}" property="text" trigger="{submitButton}"/>
  1. Add the triggerEvent property set to click.
<mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}" property="text" trigger="{submitButton}" triggerEvent="click"/>
  1. Save the file.
  2. Run the application.
  3. 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).
     
Validate the Mobile Phone field by clicking the Submit Request button.

Figure 5. Validate the Mobile Phone field by clicking the Submit Request button.

 
Suppress automatic validation

 

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.
<mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}" property="text" triggerEvent=""/>
  1. Save the file.

 
Use the validate() method

 

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.
private function validatePhones():void { }
  1. 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.
     
private function validatePhones():void { var event:ValidationResultEvent }
  1. Assign the event variable to call the mobileValidator PhoneNumberValidator instance's validate() method and append a semicolon.
private function validatePhones():void { var event:ValidationResultEvent = mobileValidator.validate(); }
  1. Locate the FormItem container with the nested Button control.
  2. To the Button control, add the click event with a value of the validatePhones() event handler.
<s:FormItem> <s:Button id="submitButton" label="Submit Request" click="validatePhones()"/> </s:FormItem>
  1. Save the file.
  2. Run the application.
  3. Click the Submit Request button.
    You should see that the application behaves exactly as it did in Figure 5.
     

 
Trigger multiple validators

 

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.
<mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}" property="text" triggerEvent=""/> <mx:PhoneNumberValidator id="mobileValidator" source="{mobilePhone}" property="text" triggerEvent=""/>
  1. For the second PhoneNumberValidator instance, change the id value to officePhoneValidator and bind the source value to the phone TextInput control.
<mx:PhoneNumberValidator id="officePhoneValidator" source="{phone}" property="text" triggerEvent=""/>
  1. Locate the Script block.
  2. Create a new import statement to import the mx.validators.Validator package.
import events.VehicleRequestEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.CalendarLayoutChangeEvent; import valueObjects.VehicleRequest; import mx.events.ValidationResultEvent; import mx.validators.Validator;
  1. Locate the validatePhones() function.
  2. Within the validatePhones() function, delete the event variable and its value.
  3. Within the validatePhones() function, declare a variable named validationArray and data type to the Array class.
private function validatePhones():void { var validationArray:Array }
  1. Assign the validationArray variable to call the Validator.validateAll() method.
private function validatePhones():void { var validationArray:Array = Validator.validateAll(); }
  1. 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.
private function validatePhones():void { var validationArray:Array = Validator.validateAll([mobileValidator,officePhoneValidator]); }
  1. Save the file and run the application.
  2. From the DropDownList control, select an employee.
  3. Remove the last digit from the Office Phone number.
  4. 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.
 
Click the Request button to validate the form.

Figure 6. Click the Request button to validate the form.

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.
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.