Macromedia Flash MX ActionScripting: Advanced Training from the Source

A sequence is a string of characters (letters, numbers, and special characters) placed in a specific order or formatted in a special way. Some example sequences might include the following:

• Telephone numbers (xxx-xxxx)

• Credit card numbers (xxxx xxxx xxxx xxxx)

• Dates (xx/xx/xxxx)

• URLs (http://www.xxxxxx.xxx)

Although the characters within sequences may change, they must still follow certain formatting rules. Sequence validation is typically a bit more involved then other types of data validation primarily because there are numerous validation points to check. By breaking the process down, you can more readily understand how it works. The following are some validation points for a typical email address:

1. It cannot contain more than one @ symbol.

2. It must include at least one period (separating the actual domain name from the domain extension, such as in mydomain.com or mydomain.net).

3. The last period must fall somewhere after the @ symbol, but it can't be either of the last two characters.

4. The @ symbol may not be the first or second character.

5. There must be at least two characters between the @ symbol and the first period that proceeds it.

6. The email address must include at least eight characters (aa@bb.cc)

TIP

If an email address has been checked for the six points listed above, you've performed a reasonable validation check. Although we could add many more validation points (for example, characters following the last period must be com, net, org, or something similar), your code would become extremely long and you would need to update it frequently to keep pace with changing Internet standards. Thus, it's important to determine the most important validation points and just check for them.

In this exercise, we'll use only the following three validation points for text entered into the email text field of our registration form:

1. The @ symbol must be included somewhere after the second character.

2. The email address must include a period at least two characters following the @ symbol.

3. The email address must include at least eight characters.

TIP

Be sure to provide your user with clear instructions about how to format data. It's common practice to provide an example of correctly formatted data either above or below the text box where it's to be entered, providing a quick reference for the user.

1. Open validate3.fla in the Lesson13/Assets folder.

   We will continue building on the project from the last exercise.

2. With the Actions panel open, select Frame 1 on the Actions layer and add this function definition at the end of the current script:

   function validateEmail () { if (email.text.indexOf("@") < 2) { errors.push(" \"@\" missing in email or in the wrong place."); } if (email.text.lastIndexOf(".") <= (email.text.indexOf("@") + 2)) { errors.push(" \".\" missing in email or in the wrong place."); } if (email.text.length < 8) { errors.push("Email address not long enough."); } }

   This function, validateEmail() , validates the text entered into the email text field and is made up of three conditional statements, each of which checks one of the individual validation points we outlined at the beginning of this exercise. Because these are separate if statements (rather than if/else , if/else if groupings), all of them will be evaluated. Let's look at each a bit more in depth. The first statement reads as follows:

   if (email.text.indexOf("@") < 2) { errors.push("@ missing in email or in the wrong place."); }

   You'll remember from previous exercises that the indexOf() method of the String object returns the character number where the value in parentheses is first found in a string. Using this method, the above statement determines whether the first @ symbol appears before the third character in the email text field. Because the first character in a string has an index number of 0, this statement evaluates to true and an error message is pushed into the errors array if the @ symbol is found at position 0 or 1. If the @ symbol doesn't occur anywhere within the email text field, this statement returns a value of 1, which is still less than 2 and thus also causes the statement to evaluate to true and the error message to be pushed into the array.

   TIP

   Using the indexOf() method, you can also check for stings longer than one character. For instance, you can check for " http:// " in a string using something similar to the following syntax: string.indexOf("http://") . The number returned is the character number of the first letter in the string.

   Let's look at the second statement in this function, which reads as follows:

   if (email.text.lastIndexOf(".") <= (email.text.indexOf("@") + 2)) { errors.push(". missing in email or in the wrong place."); }

   This statement uses the lastIndexOf() method of the String object similar to the indexOf() method except that it returns the character number of the last occurrence of the character in the parenthesis. For example, if email.text = "derek.franklin@ derekfranklin.com," email.text.lastIndexOf(".") returns 27. Using this method, the above statement looks at the position of the last period in relation to the @ symbol. If the period is less than two characters to the right of the @ symbol, this statement proves true and an error message is pushed into the errors array.

   The third statement in this function is the easiest one to comprehend. It reads as follows:

   if (email.text.length < 8) { errors.push("Email address not long enough."); }

   As already mentioned, the smallest reasonable email address is aa@bb.cc eight characters, including the @ symbol and the period. If the length of the data entered into the email text field is less than eight characters, an error message stating the email address is too short is pushed into the error array.

   After all of these statements have been evaluated, you may find that the information entered into the email text field is invalid on all counts. In this case, three different error messages would be pushed into the errors array.

3. Add the following function call just below the validateName() function call in the validateForm() function definition:

   validateEmail();

   This is a call to the function we just defined. Placing this function call here adds email validation capability to the main validateForm() function. This function call is placed just above the statement that checks the length of the errors array because the validateEmail() function is able to push error messages into the array, thus affecting its length and the way the statement is evaluated. In the end, if either the validateName() or validateEmail() functions find errors, their corresponding messages will be displayed in the errorLog text field.

   NOTE

   The Submit button in our scene already has a function call to the validateForm() function. Therefore, any new functionality we add to that function (as we have just done) is automatically executed when the button is released.

4. Choose Control > Test Movie to test the project up to this point.

   Enter an invalid email into the email text field or an invalid name into the name text field to see what the validation process turns up. Pressing the Clear button resets the visual and data elements in the scene.

5. Close the test movie to return to the authoring environment and save this file as validate4.fla.

   We will build on this file in the following exercise.