•  
  •  

Flex Custom Validation

In Flex, you use a validator to ensure the values in the fields of an object meet certain criteria. You can assign each field of an object to a single validator. I”ve used the mx.validators.Validator class, which is an ActionScript class that you can extend to add your own validation logic as I have below. I also added a <mx:Model> tag to hold the error message that will be displayed if the validation fails. The model can then be populated with error messages that are maintained outside of the Flex application.

The <mx:Validator> tag must always be immediate children of the root tag of an MXML file. The Validator tags have one required property, the field to validate. I also added validate and listener properties which allow me to specify the validation logic to execute and the validation listener.

First declare a validator in MXML using the <mx:Validator> tag. To validate data that is bound to a data model, you should declare the appropriate validator in the same file as the bindings you make to the data model.
NOTE: If the validator and bindings aren”t in the same file, the validator is not triggered when data is copied into the model; however, you could trigger validation in an ActionScript function. You do not have to declare the validator in the same file as the data model.
Second, add a call to the isValid() method specifying the field to validate in the event handler for the submit. In this example, it is the submit function that handles the click event of the <mx:Button>.

Finally, define the validation logic for the Validator”s validate event. When the validation fails, call the validationError() method.

<!-- data model holding custom error messages -->
<mx:Model id="modelData">
<errorMessage>{ errorText.text }</errorMessage>
</mx:Model>

<mx:Script>
<![CDATA[
/* Event handler for the button click.
* It will call the Validator''s isValid() method.
*/
public function submit():Void
{
mx.validators.Validator.isValid( this, "yearInput" );
}

/* Event handler called to validate the specified field. */
public function validateMe( eventObj:Object ):Void
{
if( eventObj.value.text == "" ) {
eventObj.validator.validationError( "nullValue", modelData.errorMessage, null );
}
}
]]>
</mx:Script>

<mx:Validator field="yearInput" validate="validateMe( event )" listener="yearInput" />

<mx:TextInput id="errorText"/>
<mx:TextInput id="yearInput"/>

<mx:Button label="Submit" click="submit()"/>

For fun you might try removing the listener from the Validator to see the results.

About Rob Rusher

In his role as Principal Consultant for On3, Rob leads an software development practice to help his clients build rich Internet applications for the desktop, browser, and mobile devices, and to rapidly increase their knowledge and skills to better support their organization's goals. Rob is an Adobe Certified Expert, Community Professional, and Certified Instructor. He has taught and mentored the technical teams at HP, Overstock, Paychex, SAS, the FedEx, and other Government and Fortune 100 organizations. Rob has co-authored four best-selling books on building secure, cutting-edge and rapidly developed applications using Adobe AIR, ColdFusion and Flex. He is very active in organizing and speaking at RIA, Adobe LiveCycle, mobile conferences, and user groups. In addition to growing his software consulting practice, On3, Rob has been building expertise in rich client application development on a wider variety of devices and platforms that extend the applications to change the way we all create and live.