This is a brief tutorial on email validation in Flash MX.
Firstly a few notes on what this tutorial will not do.
This tutorial will not tell you if a string entered by a
user in a text field is a real email address, it will
only tell you if the string is the correct syntax for an
email address. This tutorial deals in part with invalid
characters entered by a user but it does not cover all invalid
characters. There are too many invalid characters available
from various input devices to make a comprehensive test,
instead I have limited myself to the characters I test for,
the ones people tend to enter by mistake. Add more if
you wish, but be careful that they are indeed invalid
characters. This tutorial is written for Flash MX,
whilst I've previously used the same principles with Flash
5, the syntax used here will not work because Flash
5 does not support instance names for text fields and therefore
you cannot dynamically refer to the text colour or border
colour of a text field. Fig.1 illustrates the final
result of this tutorial.
Create a new Flash Movie. Using the text tool draw
an input text field. In the properties panel select
‘Show Border Around Text’, select ‘Single
Line’, enter emailBox as the instance
name and emailInput as the variable. Name
the layer ‘input’ and lock it. I've also
added a layer with the static text “enter email”.
Add another layer named ‘script’
select the first keyframe and enter the contents of fig.2
into the actionscripts panel.
Lines four & five set the initial
colour of the text and the border of our input field.
Lines nine, ten, eleven &
twelve are a function. What these lines do is set
the colour of our input field's text and border to black
whenever the input field is selected.
Lines thirteen, fourteen & fifteen
are another function. This time, once the input
field is de-selected another function ‘emailValidator()’
is called. It is actually more logical to have the contents
of the ‘emailValidator()’ function here,
instead of calling another function to perform the task.
However, should you wish to encorporate this script
in with several others, as part of a response form for
example, this is the more practical manner.
Fig.2 illustrates the script necessary for your user's
interaction. Immediately after it on the same keyframe
(The first in your movie on the script layer) type
the contents of fig.3. but, PLEASE NOTE:
The code I have highlighted in yellow should be typed on
ONE LINE WITHOUT SPACES OR LINE BREAKS, it's only
spread across several lines to fit on the page. Typing
the code in anything but a single line will result in a
syntax error from flash. (Apologees for the inconvenience)
Line nineteen begins our email validation
function.
Line twenty is the part of our script
that does all the work. It opens with an ‘if’
statement. This line may look more complicated than
‘if’ statements that you're used to,
because it uses ‘logical OR’ operators which
are the || bits, this syntax
cuts down our script quite considerably. It's the
equivalent of using lots of ‘if’ statements
one after the other.
The ‘logical OR’ operator
works in this way: Inside your ‘if’ statement
(or any other conditional test) you enter your conditions
surrounded by brackets and seperated by the ‘logical
OR’ operator (be sure to remember the outer brackets
of the ‘if’ statement). The ‘logical
OR’ operator, instead of saying “if my left
leg is broken then one of my legs is broken” (as
in the case of ‘if’ statements without the ‘logical
OR’ operator) says “if my left leg or my
right leg is broken then one of my legs is broken”.
Conditional statements using the ‘logical OR’
operator resolve themselves by moving through the conditions
one at a time, if one of the conditions is met then
the ‘if’ statement returns true, only when
none of the conditions are met will the ‘if’
statement return false. The conditions in this script
read as follows:
Firstly (emailInput.length<6)
is true if the length of the input from the user is less
than six. Six was arrived at because the shortest email
address I can think of is a@a.aa which is six characters
long, anything less must be invalid.
Secondly we use (emailInput.indexOf(“,”)>=0)
which says if the index number of the first comma in the
string is greater than, or equal to zero (remembering
that as with arrays the indexing of strings begins at zero)
then there is a comma in the string. Because a comma
is an invalid character in an email address if it's
present, then the test returns true, the email address
is invalid. We then repeat the same test for four other
invalid characters (semicolon, colon, forward
slash and white space). As I said in the introduction,
include as many invalid characters here as you feel inclined to.
Next we use (emailInput.indexOf(“@”)<=0)
which is the opposite of the last few tests, namely,
it says that if there is not an ‘@’ sign
in the string then the test returns true, the email
address is invalid.
The next test (emailInput.indexOf(“@”)!=emailInput.lastIndexOf(“@”))
is a slight variation. ‘indexOf()’
gives us the index number of the first instance of the character
specified, ‘lastIndexOf()’ gives
us the last instance number of the character specified.
If these two don't match then there must be at least
two instances of ‘@’ in the string,
you may only have one ‘@’ sign in an email
address so that would return true and the email address
would be invalid.
Next, (emailInput.lastIndexOf(“.”)<emailInput.indexOf(“@”))
says that there must be a ‘.’ after the
‘@’. Note that it is valid to have a
‘.’ before the ‘@’.
Finally ((emailInput.lastIndexOf(“.”)+3)>emailInput.length)
states that the last instance of ‘.’ in
the string must be followed by at least two characters.
Note that because a string's index begins at zero,
a string with one character would have that character indexed
at the zero position. To allow for this inconsistency
we add 3, not 2.
Lines twenty one & twenty two
if any of the tests in line twenty result in true then the
string is an invalid email address an we set the ‘textColor’
and the ‘borderColor’ to an offensive red to
let the user know what we think of them.
Lines twenty three–twenty six
if line twenty returns false then the string the user entered
is a valid email address and we return the ‘textColor’
and the ‘borderColor’ to it's default.
Line twenty seven ends the email
validation function.
Test your movie now and you should have an input field
that alerts you to invalid email addresses. I chose
email validation as opposed to telephone number, name
or url validation because it's more complicated and
therefore makes a more complete tutorial. To modify
this script to validate just about anything, simply
write down the requirements of a valid string and enter
the conditions in line twenty of the script. That concludes
this tutorial, I hope you found it useful.
