Flex gives you two ways to listen for validation events:

1. Listen for validation events dispatched by the component being validated.

   Flex components dispatch valid and invalid events, depending on the results of the validation. This lets you listen for the events being dispatched from the component being validated, and perform any additional processing on the component based on its validation result.

   The event object passed to the event listener is of type Event. For more information, including an example, see Explicitly handling component validation events.

2. Listen for validation events dispatched by validators.

   All validators dispatch valid or invalid events, depending on the results of the validation. You can listen for these events, and then perform any additional processing as required by your validator.

   The event object passed to the event listener is of type ValidationResultEvent. For more information, including an example, see Explicitly handing validator validation events.

You are not required to listen for validation events. When these events occur, by default, Flex changes the appropriate border color of the target component, displays an error message for an invalid event, or hides any previous error message for a valid event.

Explicitly handling component validation events

Sometimes you might want to perform some additional processing for a component if a validation fails or succeeds. In that case, you can handle the valid and invalid events yourself. The following example defines an event listener for the invalid event to perform additional processing when a validation fails:

<?xml version="1.0"?>
<!-- validators\ValCustomEventListener -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:Script>
        <![CDATA[

            // Import event class.
            import flash.events.Event;
            
            // Define vars for storing text colors.
            private var errorTextColor:Object = "red";
            private var currentTextColor:Object;
    
            // Initialization event handler for getting default text color.  
            private function myCreationComplete(eventObj:Event):void {           
                currentTextColor = getStyle('color');
            }
    
            // For an invalid event, change the text color. 
            private function handleInvalidVal(eventObject:Event):void {
                setStyle('color', errorTextColor);
            }

            // For a valid event, restore the text color.   
            private function handleValidVal(eventObject:Event):void {
                setStyle('color', currentTextColor);
            }
        ]]>
    </mx:Script>

    <mx:PhoneNumberValidator source="{phoneInput}" property="text"/>

    <mx:TextInput id="phoneInput" 
        initialize="myCreationComplete(event);" 
        invalid="handleInvalidVal(event);" 
        valid="handleValidVal(event);"/>
    <mx:TextInput id="zipInput"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Explicitly handing validator validation events

To explicitly handle the valid and invalid events dispatched by validators, define an event listener, as the following example shows:

<?xml version="1.0"?>
<!-- validators\ValEventListener.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:Script>
        <![CDATA[

            // Import event class
            import mx.events.ValidationResultEvent;
            
            private function handleValid(event:ValidationResultEvent):void {
                if(event.type==ValidationResultEvent.VALID)  
                    submitButton.enabled = true;
                else
                    submitButton.enabled = false;
            }

            // Submit form is everything is valid. 
            private function submitForm():void {
                // Handle submit.
            }

        ]]>
    </mx:Script>

    <mx:ZipCodeValidator 
        source="{inputZip}" property="text" 
        valid="handleValid(event);" 
        invalid="handleValid(event);"/>

    <mx:TextInput id="inputZip"/> 
    <mx:TextInput id="inputPn"/> 

    <mx:Button id="submitButton" 
        label="Submit"  
        enabled="false"
        click="submitForm();"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the Button control is disabled until the TextInput field contains a valid ZIP code. The type property of the event object is either ValidationResultEvent.VALID or ValidationResultEvent.INVALID, based on the result of the validation.

Within the event listener, you can use all the properties of the ValidationResultEvent class, including the following:

field 

A String that contains the name of the field that failed validation and triggered the event.

message 

A String that contains all the validator error messages created by the validation.

results 

An Array of ValidationResult objects, one for each field examined by the validator. For a successful validation, the ValidationResultEvent.results Array property is empty. For a validation failure, the ValidationResultEvent.results Array property contains one ValidationResult object for each field checked by the validator, both for fields that failed the validation and for fields that passed. Examine the ValidationResult.isError property to determine if the field passed or failed the validation.