Share on Google+Share on Google+

Validators with DataModel in Flex4

Ads
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

Advertisements

Posted on: May 29, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Advertisement