Validators with DataModel in Flex4

In the following example you can see how we can use validators with DataModel.

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"

0
trigger="{validatebtn}"

triggerEvent="click"

listener="{ziptxt}"/>

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

trigger="{validatebtn}"

triggerEvent="click"

2
listener="{socialstxt}"/>

</fx:Declarations>

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

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

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

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

4
</mx:FormItem>

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

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

5
</mx:FormItem>

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

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

6
</mx:FormItem>

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

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

7
</mx:FormItem>

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

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

8
</mx:FormItem>

<mx:FormItem>

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

9
chromeColor="#5F1B0C"/>

</mx:FormItem>

</mx:Form>

0
</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

Ads