Validating email addresses using the EmailValidator class in Flex

by Peter deHaan on August 29, 2008

in EmailValidator, ValidationResultEvent, Validators

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.

View MXML

<?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:

View MXML

<?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:

View MXML

<?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:

View MXML

<?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:

View MXML

<?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 }

1 Spanky August 29, 2008 at 10:17 pm

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)?

Reply

2 sandrar September 10, 2009 at 12:24 pm

Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: