The following example shows you how you can validate email addresses in a Flex application using the EmailValidator class and the validate() and static EmailValidator.validateEmail() methods.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/29/validating-email-addresses-using-the-emailvalidator-class-in-flex/ -->
<mx:Application name="EmailValidator_validate_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
private function emailValidator_valid(evt:ValidationResultEvent):void {
textInput.errorString = "";
message.text = "";
Alert.show(textInput.text, "You entered a valid email address:");
}
private function emailValidator_invalid(evt:ValidationResultEvent):void {
textInput.errorString = evt.message;
message.text = evt.message;
}
private function btn_click(evt:MouseEvent):void {
emailValidator.validate(textInput.text);
}
]]>
</mx:Script>
<mx:EmailValidator id="emailValidator"
valid="emailValidator_valid(event);"
invalid="emailValidator_invalid(event);" />
<mx:Form defaultButton="{btn}">
<mx:FormItem label="email address:"
direction="horizontal">
<mx:TextInput id="textInput"
focusAlpha="0.5" />
<mx:Button id="btn"
label="validate"
click="btn_click(event);" />
</mx:FormItem>
</mx:Form>
<mx:Label id="message" />
</mx:Application>
View source is enabled in the following example.
The following example shows how you can create an EmailValidator object using ActionScript:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/29/validating-email-addresses-using-the-emailvalidator-class-in-flex/ -->
<mx:Application name="EmailValidator_validate_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.validators.EmailValidator;
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
private var emailValidator:EmailValidator;
private function init():void {
emailValidator = new EmailValidator();
emailValidator.addEventListener(ValidationResultEvent.VALID, emailValidator_valid);
emailValidator.addEventListener(ValidationResultEvent.INVALID, emailValidator_invalid);
}
private function emailValidator_valid(evt:ValidationResultEvent):void {
textInput.errorString = "";
message.text = "";
Alert.show(textInput.text, "You entered a valid email address:");
}
private function emailValidator_invalid(evt:ValidationResultEvent):void {
textInput.errorString = evt.message;
message.text = evt.message;
}
private function btn_click(evt:MouseEvent):void {
emailValidator.validate(textInput.text);
}
]]>
</mx:Script>
<mx:Form defaultButton="{btn}">
<mx:FormItem label="email address:"
direction="horizontal">
<mx:TextInput id="textInput"
focusAlpha="0.5" />
<mx:Button id="btn"
label="validate"
click="btn_click(event);" />
</mx:FormItem>
</mx:Form>
<mx:Label id="message" />
</mx:Application>
The following example shows how you can validate an email address using the static EmailValidator.validateEmail() method and then loop over the array of returned ValidationResult objects:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/29/validating-email-addresses-using-the-emailvalidator-class-in-flex/ -->
<mx:Application name="EmailValidator_validate_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.validators.ValidationResult;
import mx.validators.EmailValidator;
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
private var emailValidator:EmailValidator;
private function init():void {
emailValidator = new EmailValidator();
}
private function btn_click(evt:MouseEvent):void {
var arr:Array = EmailValidator.validateEmail(emailValidator, textInput.text, "text");
var obj:ValidationResult;
if (arr.length > 0) {
obj = arr[0] as ValidationResult;
textInput.errorString = obj.errorMessage;
message.text = obj.errorMessage;
} else {
textInput.errorString = "";
message.text = "";
Alert.show(textInput.text, "You entered a valid email address:");
}
}
]]>
</mx:Script>
<mx:Form defaultButton="{btn}">
<mx:FormItem label="email address:"
direction="horizontal">
<mx:TextInput id="textInput"
focusAlpha="0.5" />
<mx:Button id="btn"
label="validate"
click="btn_click(event);" />
</mx:FormItem>
</mx:Form>
<mx:Label id="message" />
</mx:Application>
The following example shows how you can validate an email address by creating an EmailValidator object in MXML and then specifying the source, property, trigger, and triggerEvent properties:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/29/validating-email-addresses-using-the-emailvalidator-class-in-flex/ -->
<mx:Application name="EmailValidator_validate_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
private function emailValidator_valid(evt:ValidationResultEvent):void {
textInput.errorString = "";
message.text = "";
Alert.show(textInput.text, "You entered a valid email address:");
}
private function emailValidator_invalid(evt:ValidationResultEvent):void {
textInput.errorString = evt.message;
message.text = evt.message;
}
]]>
</mx:Script>
<mx:EmailValidator id="emailValidator"
valid="emailValidator_valid(event);"
invalid="emailValidator_invalid(event);"
source="{textInput}"
property="text"
trigger="{btn}"
triggerEvent="click" />
<mx:Form defaultButton="{btn}">
<mx:FormItem label="email address:"
direction="horizontal">
<mx:TextInput id="textInput"
focusAlpha="0.0" />
<mx:Button id="btn"
label="validate" />
</mx:FormItem>
</mx:Form>
<mx:Label id="message" />
</mx:Application>
The following example shows how you can validate an email address by creating an EmailValidator object using ActionScript and then specifying the source, property, trigger, and triggerEvent properties:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/29/validating-email-addresses-using-the-emailvalidator-class-in-flex/ -->
<mx:Application name="EmailValidator_validate_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Style>
@font-face {
src: local("Verdana");
fontFamily: VerdanaEmbedded;
fontWeight: bold;
}
.errorMessage {
fontFamily: VerdanaEmbedded;
fontWeight: bold;
}
.validTextInputStyle {
backgroundAlpha: 0.6;
backgroundColor: haloGreen;
}
.invalidTextInputStyle {
backgroundAlpha: 0.3;
backgroundColor: red;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.validators.EmailValidator;
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
private var emailValidator:EmailValidator;
private function init():void {
emailValidator = new EmailValidator();
emailValidator.source = textInput;
emailValidator.property = "text";
emailValidator.trigger = btn;
emailValidator.triggerEvent = MouseEvent.CLICK;
emailValidator.addEventListener(ValidationResultEvent.VALID, emailValidator_valid);
emailValidator.addEventListener(ValidationResultEvent.INVALID, emailValidator_invalid);
}
private function emailValidator_valid(evt:ValidationResultEvent):void {
textInput.errorString = "";
textInput.styleName = "validTextInputStyle";
Alert.show(textInput.text, "You entered a valid email address:");
}
private function emailValidator_invalid(evt:ValidationResultEvent):void {
textInput.errorString = evt.message;
textInput.styleName = "invalidTextInputStyle";
message.visible = true;
message.text = evt.message;
message.visible = false;
}
]]>
</mx:Script>
<mx:Fade id="dissolveEffect"
startDelay="1500"
alphaFrom="1.0"
alphaTo="0.0" />
<mx:Form defaultButton="{btn}">
<mx:FormItem label="email address:"
direction="horizontal">
<mx:TextInput id="textInput"
focusAlpha="0.5" />
<mx:Button id="btn"
label="validate" />
</mx:FormItem>
</mx:Form>
<mx:Label id="message"
styleName="errorMessage"
hideEffect="{dissolveEffect}" />
</mx:Application>
View source is enabled in the following example.
{ 2 comments… read them below or add one }
Is there an easy way to validate two textInputs for email (as in, confirmation that the user typed their email address of hotmama22@hotmail.com instead hotmama2@hotmail… assuming that they won’t mistype it the same way twice)?
Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.