DEV Community

loading...

Flex Email address validation component

Russ Hammett
Dad, programmer, faux-chef, gamer, book reader
Originally published at kritner.blogspot.com on ・1 min read

I was attempting to find a decent email validation component for flex - one with validators built in and all the bells and whistles. I wasn't able to find one at a quick glance, so I put this guy together, and it seems to actually be working so far :O

\<?xml version="1.0" encoding="utf-8"?\>
\<!--
 Created By: Russ Hammett
 Create Date: 2012-01-03
 Description: Text input that validates an email address.
 use "required" to control if the email address
 is required.

 access the public variable isValidEmail to determine
 if validation passed on the email address
 Modified By: Russ Hammett
 Modify Date: 2012-01-06
 Modify Desc: Updated validateEmail function to be public and
 update errorString accordingly when validation fails or passes.
--\>
\<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml"
 maxChars="50" 
 creationComplete="onCreationCompleted();"
 focusOut="validateEmail();" \>

 \<mx:Script\>
 \<![CDATA[
 import mx.events.ValidationResultEvent;

 private var \_isValidEmail:Boolean = true;

 public function set isValidEmail(value:Boolean):void
 {
 \_isValidEmail = value; 
 }
 [Bindable]
 public function get isValidEmail():Boolean
 {
 return \_isValidEmail;
 } 

 [Bindable]
 public var required:Boolean = false;

 /\*\*
 \* On Creation Completed
 \* \*/
 private function onCreationCompleted():void
 {
 if (required)
 {
 emailValidator.enabled = true;
 }
 else
 {
 emailValidator.enabled = false; 
 }

 }

 /\*\*
 \* Validate Email
 \* \*/
 public function validateEmail():void
 {

 var vldEmail:ValidationResultEvent;

 if (this.length \> 0)
 {
 emailValidator.enabled = true;
 vldEmail = emailValidator.validate(this.text);

 if (vldEmail.type == ValidationResultEvent.VALID)
 {
 isValidEmail = true;
 this.errorString = '';
 }
 else
 {
 isValidEmail = false;
 this.errorString = vldEmail.message;
 }

 }
 else
 {
 emailValidator.enabled = false;

 if (required)
 {
 emailValidator.enabled = true;
 vldEmail = emailValidator.validate(this.text);

 isValidEmail = false;
 this.errorString = vldEmail.message;
 }
 else
 {
 isValidEmail = true;
 this.errorString = '';
 }
 }
 }

 ]]\>
 \</mx:Script\>

 \<mx:EmailValidator 
 id="emailValidator" 
 source="{this}"
 property="text"
 required="{required}"
 requiredFieldError="Email Field is Required."
 invalidCharError="Invalid characters in your email address." 
 invalidDomainError= "The domain in your email address is incorrectly formatted." 
 invalidIPDomainError="The IP domain in your email address is incorrectly formatted." 
 invalidPeriodsInDomainError="The domain in your email address has consecutive periods." 
 missingAtSignError="Missing an at character in your email address." 
 missingPeriodInDomainError="The domain in your email address is missing a period." 
 missingUsernameError="The username in your email address is missing." 
 tooManyAtSignsError="Too many at characters in your email address." /\> 

\</mx:TextInput\>

Thanks http://www.bloggersentral.com/2009/04/how-to-show-code-in-blog-post.html#free for teaching me how to paste code (and making it look pretty) in blogger..

Discussion (0)