Validators with DataModel in Flex4

Home Tutorial Flex Flex4 Components Validators with DataModel in Flex4

Validators with DataModel in Flex4
Posted on: May 29, 2010 at 12:00 AM

In the following example you can see how we can use validators with DataModel.
Validators with DataModel in Flex4:

In the following example you can see how we can use validators with DataModel.
The <mx:PhoneNumberValidator>, <mx:EmailValidator>, <mx:Validator>, <mx:ZipCodeValidator> and <mx:SocialSecurityValidator> tags declare to validate the phone number, emial-id, required field, zipcode and socialsecurity field of the data model. When you click on button without fill the text field then an error message will be generate.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Declarations>

<fx:Model id="registration">

<registration>

<uname>{unametxt.text}</uname>

<emailid>{emailtxt.text}</emailid>

<phoneno>{phonetxt.text}</phoneno>

<zipcode>{ziptxt.text}</zipcode>

<socials>{socialstxt.text}</socials>

</registration>

</fx:Model>

<mx:Validator required="true"

source="{registration}" property="uname"

trigger="{validatebtn}"

triggerEvent="click"

listener="{unametxt}"/>

<mx:EmailValidator source="{registration}" property="emailid"

trigger="{validatebtn}"

triggerEvent="click"

listener="{emailtxt}"/>

<mx:PhoneNumberValidator source="{registration}" property="phoneno"

trigger="{validatebtn}"

triggerEvent="click"

listener="{phonetxt}"/>

<mx:ZipCodeValidator source="{registration}" property="zipcode"

trigger="{validatebtn}"

triggerEvent="click"

listener="{ziptxt}"/>

<mx:SocialSecurityValidator source="{registration}" property="socials"

trigger="{validatebtn}"

triggerEvent="click"

listener="{socialstxt}"/>

</fx:Declarations>

<s:Panel title="Validators with datamodel Example" width="550">

<mx:Form width="548" backgroundColor="#101446" color="#FFFFFF">

<mx:FormItem label="User Name" required="true">

<s:TextInput id="unametxt" width="100%" color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Email-Id" required="true">

<s:TextInput id="emailtxt" width="100%" color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Phone no." required="true">

<s:TextInput id="phonetxt" width="100%" color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Zip Code" required="true">

<s:TextInput id="ziptxt" width="60%" color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Social Security" required="true">

<s:TextInput id="socialstxt" width="100%" color="#000000"/>

</mx:FormItem>

<mx:FormItem>

<s:Button id="validatebtn" label="Check Validation"

chromeColor="#5F1B0C"/>

</mx:FormItem>

</mx:Form>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Validators with DataModel in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics