Tài liệu Validating Numbers pdf

< Day Day Up >

Validating Numbers
Validating numbers is not much different from validating strings, which we've already
discussed.
In this exercise, we'll create one last validation function to validate the data entered into
the zip_ti instance. To be a valid five-digit zip code, the entered data must meet the
following two requirements:
•
Length. The data must include exactly five characters.
•
Type. The data must contain numbers; text is invalid.
TIP
When validating numbers, you may need to call for the number entered to be more or less
in value than another number—which by now you should be able to do easily!

1. Open validate5.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 validateZip() {
5.
6. if (zip_ti.text.length != 5 || isNaN(zip_ti.text) == true) {
7.
8. errors.push("Please enter a valid zip.");
9.
10. zip_ti.setStyle("color", 0x990000);
11.
12. }

13.
14. }
15.

When called, this function checks that the data entered into the zip_ti instance
meets two conditions regarding length and type—the validation points we defined
at the beginning of this exercise. The conditional statement here states that if the
zip_ti instance does not contain five characters, or if it consists of text (rather than
numbers), the text in the zip_ti instance should be styled as red and the following
text string should be pushed into the errors array: "Please enter a valid zip."
NOTE
If you need to refresh your understanding of isNaN(), review the information in
the "Validating Strings" exercise earlier in this lesson.
3. Add the following function call just below the validateState() function call in the
validateForm() function:
4.
5. validateZip();
6.


This is a call to the function we just defined. Placing this function call here adds
zip code 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 that function is able to push error messages into the array, thus affecting
its length and the way this statement is evaluated. In the end, if validateName(),
validateEmail(), validateState(), or validateZip() finds errors, the corresponding
messages will be displayed in the errorLog_lb instance.
4. Choose Control > Test Movie to test the project up to this point.
Enter an invalid zip code in the zip_ti instance to see what the validation process
turns up. Clicking the Clear button resets the visual and data elements in the scene.

As you've probably noticed when testing the application, the text in the TextInput
instances remains red from the point at which an error is found in a particular
instance until the application is shut down or moves to the Confirm label as the
result of an error-free form submission. In addition, the haloGreen color used by
the components just doesn't suit our design.
In the next couple of steps, we'll add some cosmetic improvements to our
application so that a TextInput instance that contains red text (as the result of an
error found there) is updated to contain black text whenever the user subsequently
clicks inside the text box. We'll also change the theme color of components to a
light blue.
5. Close the test movie to return to the authoring environment. With the Actions
panel open, select Frame 1 of the Actions layer and add the following script:
6.
7. function resetColor(eventObj:Object){
8.
9. eventObj.target.setStyle("color", 0x000000);
10.
11. }
12.
13. name_ti.addEventListener("focusIn", resetColor);
14.
15. email_ti.addEventListener("focusIn", resetColor);
16.
17. state_ti.addEventListener("focusIn", resetColor);
18.
19. zip_ti.addEventListener("focusIn", resetColor);
20.

The first part of the script contains a function named resetColor(). The remaining
lines set up the TextInput instances in our application to call the resetColor()

function when any of the text boxes is given focus.
As you learned in Lesson 10
, "Scripting UI Components," when a function is
called as the result of being registered as an event listener, the function is passed
an Event object containing two properties: target and type. The target property
identifies the target path of the component instance that calls the function. As a
result of this script, when the user clicks in the email_ti instance, it is given focus
and the resetColor() function is called. The single action inside the function uses
the target property of the Event object (which in this case would have a value of
_level0.email_ti) to reference the component instance that calls the function, and
the setStyle() method to set that instance's text color to black.
6. Add the following script at the end of the current script:
7.
8. _global.style.setStyle("themeColor", 0xBDDDEB);
9.

This sets the overall theme color of all component instances in our application to
light blue.
7. Choose Control > Test Movie to test our cosmetic improvements to the project.
As you interact with the interface, you'll see how the last two scripts we added
improve the overall look of our application.
8. Close the test movie to return to the authoring environment, and save this file as
validate6.fla.
We'll build on this file in the following exercise.

< Day Day Up >