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:
function resetColor(eventObj:Object){
eventObj.target.setStyle("color", 0x000000);
}
name_ti.addEventListener("focusIn", resetColor);
email_ti.addEventListener("focusIn", resetColor);
state_ti.addEventListener("focusIn", resetColor);
zip_ti.addEventListener("focusIn", resetColor);
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, "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.
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 can 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.