Building a Custom Validator Class

In this task, you will build a custom Validator class that can check for U.S. address formatting. In the last task you built the logic that can check whether a U.S. address is valid by using regular expressions. If the user types in a bad address, an Alert box displays. However, you do not take advantage of any of the built-in Validator class functionality. With the Validator class, you can offer the user visual cues to where the error is as well as display customized error messages. Flex framework offers the ability to extend all the Validator classes and to add your own functionality.


Create a new ActionScript class by right-clicking the utils folder and selecting New > ActionScript Class. The name of the class should be AddressValidator, ensure the package name is utils, and specify a superclass of mx.validators.Validator as shown.

This will be a new custom Validator class that will use the regular expression functionality you built in the last task.


Import the mx.validators.ValidationResult class.

package utils {   import mx.validators.Validator;   import mx.validators.ValidationResult; 

The ValidationResult class contains several properties that enable you to record information about any validation properties, such as the error messages and codes that are generated from a failure.


Immediately inside of the class definition, declare the private results array.

public class AddressValidator extends Validator{   private var results:Array; 

The results array will be returned from the doValidation() method that you will override.


Declare a public constructor with the name AddressValidator and call the base class constructor using super().

public class AddressValidator extends Validator{   private var results:Array;   public function AddressValidator(){      super();   } 

The public constructor function invokes super() of the base Validator class. The base class can perform the check to ensure that data was entered into a required field.


Override the protected function doValidation() method and set the parameter of the method to Object. The method will return an array.

override protected function doValidation(value:Object):Array{ } 

The method on the AddressValidator class is now overriding the existing Validator class method, and you are defining a new doValidation() method. The doValidation() method will return an array of ValidationResult objects.


Public methods and properties are available to any object in the system. Private methods and properties are only available inside the class where they are defined. Protected methods and properties are available inside the same class and all derived classes, or subclasses.


Inside the method, clear the results array and call the base class doValidation() method, passing it the value from our doValidation() method. Return the results array at the end of the method.

override protected function doValidation(value:Object):Array{   results = [];   results = super.doValidation(value);   return results; } 

The results array is simply an array of ValidationResult objects, one for each field examined by the Validator. If the validation is successful, the results array will remain empty. If the validation is not successful, one ValidationResult per each field will be returned whether the validation of the individual field is successful or not. The isError property of the ValidationResult can be examined to determine whether the field passed or failed validation.


Immediately after calling the super.doValidation() method, add conditional logic to test if the value object passed into the AddressValidator doValidation() method is null.

override protected function doValidation(value:Object):Array{   results = [];   results = super.doValidation(value);   if(value!=null){   }   return results; } 

You are about to search this value with your regular expression, but only if the value contains some data.


Return to the BillingInfo.mxml file and locate the process() method. Inside this method, remove the conditional logic and cut the definition of the pattern regular expression to the clipboard. Save the BillingInfo.mxml file. The final process() method should look as follows:

private function process():void{    var o:ObjectDataEvent = new ObjectDataEvent("billingInfoReturn",checkoutInfo);    dispatchEvent(o); } 

You will place this logic inside of the new AddressValidator class that you are creating. You can still make sure that the user enters a valid U.S. address and you will have all of the functionality of the Validator class.


Return to the AddressValidator class. Inside the conditional logic, paste the definition of the pattern regular expression. Add conditional logic that uses the search method of the String class to search value for the pattern and tests for -1, as follows:

if(value!=null){    var pattern:RegExp = new RegExp("\\d+\\x20[A-Za-z]+", "");    if( == -1){    } } 

You have defined the same regular expression that will search for valid U.S. addresses, except now it is part of a new class subclass of Validator. If a valid U.S. address is not found, the search method will return -1, and you will need to inform the user that the validation failed.


Inside the conditional logic that searches for the regular expression, push a new ValidationResult with the parameters: true, null, "notAddress", and "You must enter a valid US address" into the results array. Save the file. The final doValidation() method should appear as follows:

[View full width]

override protected function doValidation(value:Object):Array{ results = []; results = super.doValidation(value); if(value!=null){ var pattern:RegExp = new RegExp("\\d+\\x20[A-Za-z]+", ""); if( == -1){ results.push(new ValidationResult (true, null, "notAddress", "This is not a valid US address")); } } return results; }

If the regular expression is not found in the string the user entered, a new ValidationResult error will be added to the results array. Remember that this is how the Validator class works: it displays error messages from the results array in the field that the user mouses over. You can have more than one error message so it needs to be an array. In this case, if the user entered a nonU.S. address, the error message "This is not a valid US address" will display.


Return to BillingInfo.mxml. Add a new namespace to the <mx:HBox> tag at the top of the page, with the name u, that will reference all files in the utils.* directory.

<mx:HBox xmlns:mx=""   xmlns:u="utils.*"> 

This will enable you to reference the new customized AddressValidator class you created by using the namespace u.


Directly below the existing ZipCodeValidator class, add a new <u:AddressValidator> tag. Specify the id as addressV, the required property as TRue, the source as a binding to the billingAddress field, and the property as text.

<u:AddressValidator  required="true"    source="{billingAddress}" property="text"/> 

This creates an instance of the new Validator class you have created. Because it is subclassing the existing Validator class, the properties are exactly the same as before.


Save and run the application.

Click the Checkout button and enter an address that begins with a letter (which is not valid in the United States). Tab off the field; the field is now highlighted in red, and you should see the error message you specified earlier when you roll over the field.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: