Social Retail 2.0

<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:application mx="http://www.adobe.com/2006/mxml" backgroundcolor="#FFFFFF" backgroundalpha="0" me="com.mycustom.components.*"><br /><br /> <mx:form><br /> <mx:formitem label="Email Address:"><br /> <me:textinputemail><br /> </mx:FormItem><br /> <mx:formitem><br /> <mx:button label="Submit"><br /> </mx:FormItem><br /> </mx:Form><br /><br /></mx:Application><br />

<br />package com.mycustom.components<br />{<br />import mx.controls.TextInput;<br />import mx.events.ValidationResultEvent;<br />import mx.validators.EmailValidator;<br />import flash.events.Event;<br />import mx.validators.ValidationResult;<br /><br />//create new class from existing component<br />public class TextInputEmail extends TextInput<br />{<br /> //create properties<br /> private var emailValidator:EmailValidator = new EmailValidator();<br /> private var validator:ValidationResultEvent;<br /><br /> //constructor<br /> public function TextInputEmail()<br /> {<br /> //get access to the methods and properties of the super class<br /> super();<br /> //set properties of the validator<br /> this.emailValidator.source = this;<br /> this.emailValidator.property = "text";<br /><br /> //listen for the keyboard enter, call validate method<br /> this.addEventListener("enter", this.validate);<br /><br /> }<br /><br /> private function validate(event:Event):void<br /> {<br /> //validate input<br /> validator = emailValidator.validate();<br /> //check validation result<br /> if (validator.type == ValidationResultEvent.VALID)<br /> {<br /> this.errorString = "";<br /> } else {<br /> //set message in input mouseover<br /> this.errorString = validator.message;<br /> }<br /> }<br />}<br />}<br /><br />
We can validate our input using form controls but if u want to customize the TextInput control as a E-Mail validator then this is for you:
Output is: