In this exercise, we'll create one last validation function to validate the data entered into the zip_ti instance.. When called, this function checks that the data entered into the zip_t
Trang 1< 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
Trang 2meets 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
Trang 3because 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
Trang 4lines 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 >