Activation process: e-mail validation with RegExp in AS3

The technical part of the “activation” process in the .telexer application – making the call from the .telexer to the Plimus API to see if the license key is valid – was really easy. Just an xml-request to a secure url – wait for the response, and take it from there. But I wanted the experience to be OK as well. Turned out the simple interaction on the form elements took most of the time.

…the popup validation window:

The input fields get flags for four separate validation states. A dark check for default state (no text), a light grey check for a valid pattern to the input (which is a little animation, flashing from dark to orange to grey), a warning triangle for problems and invalid input, and finally, when the call to Plimus has returned the all-clear, an orange checkmark for OK.

The interaction logic was the biggest puzzle, so for anybody struggling with the same, here’s what I did. On the Event.CHANGE, which happens every keystroke, I check to see if both strings match the valid pattern. If that’s the case, and only then, the button gets activated, and the grey “halfway there” flags are set. On the FocusEvent.FOCUS_OUT, that’s when you leave the field, I also check the pattern, and set the appropriate flag. In this way you can type in the field without immediately seeing the warning icon jumping up. Only when you mouse or tab away from your input do you get feedback on it.

Probably needless to say is that I don’t check the validity of the license key – that happens on the Plimus server. I flag the field as valid when the length of the string is OK, that’s all… But the e-mail validation is another story.

There’s too much code in that bit to dump here, but I will show the RegExp that validates the e-mail input, as that’s a super handy snippet for re-use elsewhere:

private function validateEmail():Boolean{
      //valid format for email address?
      var emailStr:String = pwClip.input1.t_txt.text;
      var pattern:RegExp = /^(([a-zA-Z0-9]+_+)|([a-zA-Z0-9]+\-+)|([a-zA-Z0-9]+\.+))
*[a-zA-Z0-9]+@(([a-zA-Z0-9]+\-+)|([a-zA-Z0-9]+\.+))*[a-zA-Z]*[0-9]*([a-zA-Z]){2,60}
\.[a-zA-Z]{2,4$/; 
      var pObj:Object = pattern.exec(emailStr);
      if(pObj == null) {
            return false;
      }
      return true;
}

It checks the e-mail string to see if there’s a domain of 2 to 63 characters after the “@” sign, maybe a subdomain as well, and that must be followed by a dot plus two to four characters. Plus it allows / disallows some other characters as well.

This pattern would mark these as valid:
“blago123@my.nl” – “h.hoog@office.blago.net” – “h.double-name@do-main.info” – “aa@server2.co.uk” – “blago@xs4all.nl”
These would be considered invalid:
“.test.@my.nl” – “123@blago.office” (no “.museum” tld either) – “n@1234.com”

Without RegExp, this would have been a lengthy script, so I’m glad Flash now supports it. Still, it’s a bit of a secret sign language to me still; I need a book to remember what’s what again. If you see any problems with this pattern, please let me know!