VALIDATING STRINGS | Macromedia Flash MX ActionScripting: Advanced Training from the Source

As mentioned earlier, when validating different types of data (names, phone numbers, email addresses, and so on) it's best to break the process into specialized functions, or validation routines. We will begin that process in this exercise.

The first type of data our form asks for is the user's name. For our form, the data entered must meet two requirements:

Length. The name must be at least two characters long.
Type. Text must be used; a number cannot be accepted as a valid name.

TIP

We could define other validation points, such as a maximum length or even that the name begin with a D, but the ones we have chosen are sufficient for our purposes.

In this exercise, we'll create a function for validating the name entered into our project's registration form.

Open validate2.fla in the Lesson13/Assets folder.

We'll build on the project from the last exercise.
With the Actions panel open, select Frame 1 on the Actions layer and add this function definition at the end of the current script:
```
 function validateName () { if (name.text.length < 2 || isNaN(name.text) == false) { errors.push("Please enter a valid name."); } } 
```
When called, this function checks the data entered in the name text field for two conditions, its length and type (the validation points we defined at the beginning of this exercise). The conditional statement here says that if the name text field contains less than two characters or is a number, the string "Please enter a valid name" should be pushed into the errors array. Although we've used the length property in other scripts, some of this syntax is new and thus requires explanation.

One of the validation points we've defined for the name text field is that a number entered into it would need to be considered an error. To validate whether data is a number or text string, we would use the isNaN() function. This built-in function verifies that the argument passed to it (within the parentheses) is not a number (hence the name isNaN , or is Not a Number). Take a look at the following examples:

isNaN("Box") returns a value of true because the value of "Box" is a string which means it's true that it's not a number.

isNaN(465) returns a value of false because 465 is a number that is, it's false to state that 465 is not a number.

Thus, isNaN(name.text) == false is the same thing as saying, "If name is a number."

If either of the conditions in the statement exist, data has been improperly input. As a result, the action within the if statement is executed. This action uses the push() method of the array object to add an element to the end of the errors array. (This element is what's enclosed in the parentheses.) If you think of the errors array as a book, using the push() method is like adding a page to the end of the book, with the string within the parentheses representing the text on that page. The page number of this page would be its index position within the array.

In the case of this function, if the data in the name text field is invalid, the text "Please enter a valid name" is "pushed" into the errors array.

Next, we'll create a function to retrieve this error from the array (if name is not valid and it's pushed into the array) and display it in the errorLog text field.
With the Actions panel still open, add this function definition at the end of the current script:
```
 function validateForm () { errorLog.text = ""; errors.length = 0; validateName(); if (errors.length > 0) { errorLog.htmlText = "These errors were found: "; var i = -1; while (++i < errors.length) { errorLog.htmlText += errors[i] + newline; } } else { gotoAndStop ("Confirm", 1); } } 
```
In the previous step, we created a validation function to check the data entered into the name text field. As we progress through this lesson, we'll create several more validation functions to validate the data entered into our other form fields. However, the function you'll create in this step validateForm() is really the mother of all these other functions because eventually it will be used to call all of the individual validation functions and then finalize the validation process, including outputting error messages to the errorLog text field. Take special note of the sequence of actions in this function: This flow plays an important role in how the function works.

The first two actions in this function clear the errorLog text field as well as any messages that may exist in the errors array. Obviously, the first time the form is validated, these actions are worthless because both begin empty anyway. Any subsequent validation of the entered data will require that the errorLog text field begin the process empty of any text and that any error messages in the errors array be erased.

The next line contains a function call to the validateName() function we defined in the previous step. This will cause that function to execute and thus validate the data in the name text field. As a result, an error message is either pushed into the errors array (if data is invalid) or it is not.

NOTE

We will add more function calls here as we define them in the following exercises.

The next action in this function is an if statement, which is evaluated only after the validateName() function has completed its job. This is where the sequence of actions becomes important. If an error message gets pushed into the errors array as a result of calling the validateName() function, the length property of the errors array gets changed to 1, indicating that it contains at least one error message. This if statement then looks at the length property of the errors array and acts accordingly. If the length property has a value greater than 0 (indicating error messages within the array), the resulting actions output those messages to the errorLog text field. If errors.length is 0, this means there are no error messages and the data is valid; thus, a gotoAndStop() action sends the timeline to the scene named Confirm.

The actions used to output the error messages are pretty straightforward: The first creates the line that appears initially. Using a couple of HTML bold tags ( ), the text "These errors were found:" is displayed in bold, followed by a line break (  ). Next, a looping statement is used to loop through the errors array to add the error messages stored there to the errorLog text field (using ActionScript you're by now familiar with). When this process is complete, the errorLog text field will display any messages within the errors array.

Although you're by now familiar with the text property of text fields, you'll notice that the above script uses htmlText in relation to the errorLog text field. You can use this text field property in two ways (similar to the text property): to retrieve the HTML representation of text displayed in a text field, or to set the text displayed (rendered in HTML) in a text field. To better understand this, take a look at the following example:
```
 message.text = "Hello there!"; 
```
The above script will display Hello there! in a text field named message. Because we're setting the text property, the displayed text is an exact representation of the string value. In contrast, take a look at the following:
```
 message.htmlText = "Hello there!"; 
```
The above script will display Hello there! in the text field. In the above, we simply changed the script so that it sets the text to be rendered in HTML, as it should be. When setting HTML text in a text field using the htmlText setting, you're telling the field to be aware that the incoming text has HTML tags and thus should be rendered as such.

A text field must be HTML-aware to properly render a string of text containing HTML tags. You can indicate that a text field is an HTML text field by pressing the "Render text as HTML" button in the Property inspector, or by setting the text field's html property to true . For our project, we simply selected the option (for the errorLog text field) on the Property inspector.
With the Actions panel still open, select the Submit button at the bottom of the screen and add this script:
```
 on (release) {    validateForm();  } 
```
This script calls the validateForm() function we just defined, causing the actions within that function to be executed when the button is released.
Choose Control > Test Movie to test the project up to this point.

Enter an invalid name into the name text field to see what the validation process turns up. Pressing the Clear button will reset the scene's the visual and data elements.
Close the test movie to return to the authoring environment and save this file as validate3.fla.

We'll build on this file in the following exercise.