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.
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.
Leave a Comment