Next , let's build a simple user input form that checks the user's input as the user types. It asks for the user 's name , year of birth, and e-mail address. It checks to make sure that each entry fits certain criteria.
The name, for instance, should be at least three characters long. The date of birth should be four digits and be sometime in the last 100 years . E-mail address should be at least seven characters long and be of the format a @ b. c, where a and b can be anything, but c must be at least three characters long. The "@" and period must be present.
-
Start with a new movie.
-
Create three input fields, one for the user's name, one for the user's year of birth, and one for the user's e-mail address. Name these fields userName, userYear, and userEmail. Link these three fields to the variables userNameText , userYearText , and userEmailText . You'll also need to create a dynamic text field linked to the feedback variable . In addition, create a Submit button. Your final movie should look something like Figure 15.6. You can examine the example movie 15inputmonitor.fla as well.
Figure 15.6. This movie checks all three fields to make sure that the input is appropriate.
-
The main part of the code goes on the frame. It starts with the stop() command so that the movie doesn't continue past the first frame. Then, the restrict and maxChars properties are set for each field.
stop(); // restrict name to 64 characters userName.maxChars = 64; // restrict year to 4 digits userYear.restrict = "01234567890"; userYear.maxChars = 4; // restrict email address characters userEmail.restrict = "abcdefghijklmnopqrstuvwxyz0123456789@.-_"; userEmail.maxChars = 128;
-
Next, we'll force the movie to start with the keyboard focus on the first field.
Selection.setFocus(userName);
-
To recognize when a user is finished with a field, we'll monitor the focus of the keyboard with a Selection object listener. This alerts us whenever the onSetFocus event occurs.
Selection.addListener(this);
-
Next, we'll set a variable named ignoreSetFocus to false. We'll use this variable later in the script.
ignoreSetFocus = false;
-
The function that deals with the onSetFocus event gets two parameters passed to it. The first is a reference to the field that was the previously focused text field, and the second is the currently focused text field.
We'll use the oldFocus parameter to determine which field was just completed. But first, the variable ignoreSetFocus is checked. If it is true, it is set to false for next time. The function exits immediately by using the return command.
Then the oldFocus variable is compared to the three text fields. If it matches one of them, one of three functions is called. The result of this function is placed in ret .
The variable ret is set to false by one of these functions if the value of the field is not appropriate. In that case, ignoreSetFocus is set to true, and the focus is changed back to the previous field. The purpose of ignoreSetFocus is to prevent the function from being called a second time when the focus is changed by the code.
this.onSetFocus = function(oldFocus, newFocus) { // this is a focus reset, so ignore if (ignoreSetFocus) { ignoreSetFocus = false; return(0); } // use the appropriate check function if (oldFocus == userName) { ret = checkUserName(); } else if (oldFocus == userYear) { ret = checkUserYear(); } else if (oldFocus == userEmail) { ret = checkUserEmail(); } if (!ret) { // ignore this focus change and go back ignoreSetFocus = true; Selection.setFocus(oldFocus); } } -
The checkUserName function examines the length of the userNameText to make sure that it is at least three characters. If it is not, a message is placed in the text field linked to the feedback variable. The function returns a false as well. Otherwise, the feedback variable is cleared, and a true is returned.
// make sure that the use name is at least three characters function checkUserName() { if (userNameText.length < 3) { feedback = "You must enter more than 3 characters for your name." return(false); } // reset feedback field feedback = ""; return(true); } -
The next function checks the userYearText variable. It makes sure that there is a value there, and then it compares the value to the current year. It gets the current year from the user's system clock. It makes sure that the year is at least 100 years ago and no more than this year.
// make sure the year is one of the last 100 function checkUserYear() { // get this year today = new Date(); thisYear = 1900+today.getYear(); // check to make sure something was entered if (parseInt(userYearText) == Math.NaN) { feedback = "You must enter year."; return(false); // check to make sure that the year is not too early } else if (parseInt(userYearText) < thisYear-100) { feedback = "You must enter a more recent year."; return(false); // check to make sure that the year is not past this year } else if (parseInt(userYearText) > thisYear) { feedback = "You must enter a year earlier than this year."; return(false); } // reset feedback field feedback = ""; return(true); } -
This last function checks the userEmailText to make sure that it is at least seven characters long, that it contains a "@" and a dot, that at least two characters are after the dot, and that the "@" comes before the dot.
// check the email address function checkUserEmail() { if (userEmailText.length < 7) { feedback = "Email address too short."; return(false); } else if (userEmailText.indexOf("@") == -1) { feedback = "Missing @."; return(false); } else if (userEmailText.indexOf(".") == -1) { feedback = "Missing the dot."; return(false); } else if (userEmailText.indexOf("@") > userEmailText.indexOf(".")) { feedback = "@ and dot in wrong order."; return(false); } else if (userEmailText.lastIndexOf(".") > userEmailText.length-3) { feedback = "Not a valid domain extension." return(false); } // reset feedback field feedback = ""; return(true); } -
Now all the fields are checked as the user Tabs through them. However, we'll want to perform a complete check when the user clicks the Submit button. This calls the same three functions, one-by-one, until it hits one that is not true. If all are true, then it returns a true.
function checkAll() { if (!checkUserName()) { return(false); } else if (!checkUserYear()) { return(false); } else if (!checkUserEmail()) { return(false); } return(true); } -
It is up to the button script to call the checkAll function. If it gets a true from the checkAll function, it can move the movie to the next frame, where there is a "Thank You" message.
on (release) { if (checkAll()) { nextFrame(); } } In a complete movie, you will probably want to submit the information to your server. You will find out how to do that in Hour 18.
You could simplify this movie a great deal by removing the listener. Instead, just check for the correct input when the user clicks the Submit button.
