Macromedia Flash MX 2004 ActionScript: Training from the Source

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 comparing 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:

    function validateState() { var states:Array = ["California", "Indiana", "North Carolina", "Oklahoma"]; var matchFound:Boolean = false; for (var i = 0; i <= states.length; ++i) { if (state_ti.text == states[i]) { matchFound = true; break; } } if (!matchFound) { errors.push("Please enter a valid state."); state_ti.setStyle("color", 0x990000); } }

    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:

    validateState(); 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.

Категории