HTML/CSS Service

Flex Input Validation

Category: Learn Flex, flex tutorials    |    6,309 views

Flex has a set of Validator classes which can be used to validation data entries. The Validator class is the base for all other validator classes.

  • Credit card validation
  • Date validation
  • Email address validation
  • Number validation
  • Phone number validation
  • Social security validation
  • String validation
  • Zip code validation
  • Regular expression validation

To use validation, instantiate a validation sub class for each target field. For instance, consider this Text Input control,

<mx:TextInput id=”ageInput” />

To ensure that a number is entered into this field, instantiate the validator class as follows,

<mx:NumberValidator source=”{ageInput}property=”text” />

Note: by default, the validation fails if the field is empty. If you wish to validate a field only if data is entered, set the “required” property to false as follows,

<mx:NumberValidator source=”{ageInput}property=”text” required=”false” />

Once a validation is instanciated, it should be attached to an event. Normally, validation is attached to the field’s “focusOut” event.

<mx:NumberValidator source=”{ageInput}property=”text” trigger=”{ageInput}triggerEvent=”focusOut” />

Each validator sub class has a set of attributes that let’s you fine tune the validation. For example, for NumberValidator, I could set the “minValue” and “maxValue”. Please consult the Flex documentation for a complete list of validation attributes.

Validation with Regular Expression

If none of the validation sub classes match your needs, consider using the RegExpValidator class.  Regular expression allows you to perform complex pattern matching on strings. The Canadian postal code, for example, is formated like “K1N 2P6?. The default US zip code validator would not work. Instead, we could use the regular expression validator as follows,

<mx:RegExpValidator source=”{ageInput}property=”text” expression=”[A-Z][0-9][A-Z] [0-9][A-Z][0-9]/>

The regular expression validator also sports a number of flags to further enrich the regular expression. For instance, to turn off case sensitivity, just set the flag to “i”,

<mx:RegExpValidator source=”{ageInput}property=”text” expression=”[A-Z][0-9][A-Z] [0-9][A-Z][0-9]flags=”i” />

Share/Save/Bookmark

1 Star2 Stars (+13)

Tags: , , ,

1 response so far!

Leave a Comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word