< Day Day Up >
Validating Against a List of Choices
There are times when a value entered into a form must match one of several choices. For
example, if a form asks the user to enter a specific color—red, yellow, or blue—and the
user accidentally enters rod or yullow instead, it's important to be able to detect that error
when validating the form.
If you're going to compare data entered against a list of choices, obviously you must
define that list first. In ActionScript, an array can include a list of choices. The validation
process is simply a matter of com
paring the entered data against the values in the array to
see if there's a match.
In this exercise, we'll create another validation routine—this one to compare what's
entered in the state_ti instance against an array of state names.
TIP
It's best to have users do as little manual data entry as possible. Instead of requiring the
user to input data that matches one of several choices, you would be better off providing
a drop-down list from which the user could choose a value—a method that eliminates the
need for data validation. In some applications, however, this is impossible—for example,
in a quiz application that contains a list of answers you don't want users to be able to
access. In such cases, there's no way to avoid manual validation.
1. Open validate4.fla.
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 the
following function definition at the end of the current script:
3.
4. function validateState() {
5.
6. var states:Array = ["California", "Indiana", "North Carolina", "Oklahoma"];
7.
8. var matchFound:Boolean = false;
9.
10. for (var i = 0; i <= states.length; ++i) {
11.
12. if (state_ti.text == states[i]) {
13.
14. matchFound = true;
15.
16. break;
17.
18. }
19.
20. }
21.
22. if (!matchFound) {
23.
24. errors.push("Please enter a valid state.");
25.
26. state_ti.setStyle("color", 0x990000);
27.
28. }
29.
30. }
31.
The validateState() function validates the data entered into the state_ti instance.
The first action in this function creates an array named states, which will hold all
of the possible choices. To keep this as short as possible, we've included only four
state names, although you could easily add all 50.
The next action creates a variable named matchFound and assigns it an initial
value of false. The importance of this variable will become evident in a moment.
The next several lines in this function are part of a looping statement, which is
used to loop through all the values in the states array, comparing each to the value
entered in the state_ti instance. If a match is found, matchFound is set to true. If no
match is found, the value of this variable remains false (its initial state), indicating
an error.
The last part of the function contains an if statement that's executed after the
looping statement has completed its job. It says that if matchFound is false (which
it will be if no match is found), an appropriate error message should be pushed
into the errors array and the state_ti instance's text should be styled as red (as in
the other functions we've created thus far).
3. Add the following function call just below the validateEmail() function call in the
validateForm() function definition:
4.
5. validateState();
6.
This is a call to the validateState() function we just defined. Placing this function
call here adds state-name validation capability to the main validateForm()
function. This function call is placed just above the conditional statement that
checks the length of the errors array because that 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 validateName(), validateEmail(), or validateState() finds
errors, the corresponding messages will be displayed in the errorLog_lb List
component instance.
4. Choose Control > Test Movie to test your project thus far.
Enter an invalid state name (anything other than the four state names in the array)
into the state_ti instance to see what the validation process turns up. Click the
Clear button to reset the visual and data elements in the scene.
5. Close the test movie to return to the authoring environment, and save this file as
validate5.fla.
We will build on this file in the following exercise.
< Day Day Up >