Com certeza esta é o pior trabalho que temos em qualquer linguagem, porém a unica forma que tem de saber se o e-mail é válido é enviando um e-mail e pedindo confirmação.

Mais quando esta fase não é tão importante, podemos criar um bom validador de e-mail que pelo menos faz com que o usuário digite um e-mail que seje válido.

Para podermos valida-lo de forma fácil criei uma variável booleana, publica que recebe o status atual do TextInput. Também criamos um MetaData para registrarmos o Evento changed. Assim podemos chamar este evento diretamente no MXML do TextInputEmail.

Arquivo br/mx/controls/TextInputEmail.mxml
<mx:Script>
    <![CDATA[
        import mx.validators.EmailValidator;
        import mx.events.ValidationResultEvent;

        [Bindable] public var isValid:Boolean = false;

        private function inputChanged(event:Event):void
        {
            //Verifica se esta válido
            var validationEvent:ValidationResultEvent = emailValidator.validate(null, true); 

            // Define o Status atual do Email
            isValid = (validationEvent.type == ValidationResultEvent.VALID);
            dispatchEvent(new Event("changed"));
        }
    ]]>
</mx:Script>
<mx:Metadata>
    [Event(name="changed", type="flash.events.Event")]
</mx:Metadata>

Agora podemos chamar este componente na aplicação, e usar as novas propriedades que criamos no componente. Com estas novas propriedades, podemos fazer com que o Botão Enviar seje habilitado somente apenas quando todos os campos estiverem preenchidos.

arquivo main.mxml
<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        private function onChange():void
        {
            submitBtn.enabled = email1.isValid && email2.isValid && email3.isValid
        }
    ]]>
</mx:Script>
<mx:Form  y="55" x="10" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
    <mx:FormItem label="Email 1: " direction="horizontal">
        <controls:TextInputEmail id="email1" width="180" changed="onChange()" />
        <mx:Label text="{email1.isValid}"/>
    </mx:FormItem>
    <mx:FormItem label="Email 2: "  direction="horizontal">
        <controls:TextInputEmail id="email2" width="180" changed="onChange()" />
        <mx:Label text="{email2.isValid}"/>
    </mx:FormItem>
    <mx:FormItem label="Email 3: "  direction="horizontal">
        <controls:TextInputEmail id="email3" width="180" changed="onChange()" />
        <mx:Label text="{email3.isValid}"/>
    </mx:FormItem>
    <mx:FormItem>
        <mx:Button label="Enviar" id="submitBtn" enabled="false"
            click="Alert.show('OK, estão todos válidos!')"/>
    </mx:FormItem>
</mx:Form>

Bom trabalho e segue o fonte.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

Compartilhar no Facebook Compartilhar no Google Bookmarks Compartilhar no Twitter Compartilhar no LinkedIn

5 comentários

  1. Bruno Carneiro
    25 de Março de 2009

    Amigo, acredito que o código do arquivo TextInputEmail.mxml esta incompleto de acordo com o link do fonte no final do post.

    Poderia conferir?

    Responder
  2. Alemão
    25 de Março de 2009

    É pequeno mesmo.

    Responder
  3. Bruno Carneiro
    26 de Março de 2009

    Qual é o significado desta linha?

    var validationEvent:ValidationResultEvent = validationEvent = emailValidator.validate(null, true);

    Minha pergunta se refere ao fato de a variável validationEvent ser atribuida duas vezes. No meu projeto eu removi a duplicação:

    var validationEvent:ValidationResultEvent = emailValidator.validate(null, true);

    PARECE que está funcionando corretamente.

    Responder
  4. Alemão
    26 de Março de 2009

    Dupliquei o número de iguais, corrigido

    var validationEvent:ValidationResultEvent = emailValidator.validate(null, true);

    Responder
  5. cyberfifa
    20 de Abril de 2009

    Parabens pelo tutorial...
    tenho um problema ao importar...

    diz que é impossivel abrir o libs...

    como poderei contornar esse problema?

    Responder

Deixe uma resposta