DeLong Enterprises Kay Ramirez is the payroll manager for DeLong Enterprises, a manufacturer of computer components. The company has been busy putting corporate information on the companys intranet. Kay is heading a project to put all of the payrollrelated forms and reports online. She asks you to help write a program for the online travel expense form. The travel expense report form requires employees to itemize their various travel expenses for corporate trips. Kay wants scripts added to the form to ensure that all of the required data is entered in the correct format. If a required data field is left blank or if data is entered in an improper format, Kay wants the program to highlight the field in yellow and refuse submission of the form to the corporate Web server. Kay wants the form to support the following features: The employee must enter a last name, a first name, a Social Security number, an address for the reimbursement check, and a summary of the trip. The employee must enter the account ID number in the format ACTnnnnnn, the department ID number in the format DEPTnnn, and the project ID number in the format PROJnnnnn. For each day in which the employee has recorded an expense, the travel date must be entered. When the employee enters a travel, lodging, or meal expense, the subtotal of expenses for that day and the total cost of the trip should update automatically. Travel expenses must be entered as digits (either with or without the two-digit decimal place) and displayed to two digits.

Complete the following: 1. Use your text editor to open the exptxt.htm and reporttxt.js files from the tutorial.05\case2 folder, enter your name and the date in the comment section of each file, and then save the files as exp.htm and report.js, respectively. 2. Go to the exp.htm file in your text editor, insert a link to the report.js script file in the head section of the document, review the content and elements used in the document, and then close the file, saving your changes. 3. Return to the report.js file in your text editor, and then add an event handler to the file, running the initPage() function when the page is loaded by the browser. 4. Insert the initPage() function. The purpose of this function is to set up the initial conditions for the exp.htm page. Add the following commands to the function: a. Declare an array variable named dataFields. This array will point to the input elements in the expense report for daily expenses of travel, lodging, and meals. b. The input elements for the daily travel, lodging, and meal expenses all belong to the expenseEntry class. Use a For loop to populate the content of the dataFields array with the object collection of all elements belonging to the expenseEntry class. c. For each item in the dataFields array, add an onblur event handler that runs the update() function whenever the focus leaves the dataFields element. d. Add an event handler to the Web form that runs the validateForm() function when the form is submitted to the browser.

5. Create a function named testLength(). The purpose of the testLength() function is to test whether the user has entered any text in a required field. If no text has been entered, the function should highlight the field and return the value false. If any text has been entered, the function should remove any highlighting and return the value true. The function has a single parameter named field that represents the field object to be tested. To complete the function, insert the following commands: a. Insert a conditional expression that tests whether the length of the field value is equal to 0. b. If the length is equal to 0, then: (i) Change the background color of the field object to yellow and (ii) Return the Boolean value false; otherwise: (i) Change the background color of the field object to white and (ii) Return the Boolean value true. 6. Create a function named testPattern(). The purpose of this function is to compare the value of a field against a regular expression pattern. If the fields value does not match the regular expression, the function should highlight the field on the form and return the Boolean value false. If the fields value does match the regular expression, the function should remove any highlighting and return the Boolean value true. The function has two parameters: the field parameter, representing the field object to be tested; and regx, a regular expression containing the pattern used for the testing. To complete the testPattern() function, insert the following commands: a. Insert a conditional expression that employs the test() method to test whether the value of the field object matches the regular expression contained in the regx parameter. b. If the test() method returns the value false, then: (i) Change the background color of the field object to yellow, (ii) Change the color of the field object to red, and (iii) Return the Boolean value false; otherwise: (i) Change the background color of the field object to white, (ii) Change the color of the field object to black, and (iii) Return the Boolean value true. 7. Create a function named validateForm(). The purpose of this function is to validate the form before it can be submitted to the server by calling the testPattern() and testLength() functions you just created. The function has no parameters. Add the following commands to the function: a. Create a variable named isValid. The purpose of this variable is to record whether the form is valid or not. Set the initial value of the isValid variable to true. b. Call the testLength() function with the lname field object as the parameter. (Hint: Use the object reference document.forms[0].lname.) If the value returned by the testLength() function is false, set the value of the isValid variable to false. Repeat this step for the fname, address, and summary fields. c. Call the testPattern() function with a reference to the account field as the field parameter value. For the regx parameter, insert a regular expression literal that matches a text string containing only the text ACT followed by six digits. If the value returned by the testPattern() function is false, set the value of the isValid variable to false. d. Call the testPattern() function with the department field for the field parameter. The regx parameter should contain a regular expression literal for a text string containing only the characters DEPT followed by three digits. If the value of the testPattern() function is false, set the value of the isValid variable to false. e. Repeat the previous step for the project field, using a regular expression that matches a text string containing only the characters PROJ followed by five digits.

f. Call the testPattern() function for the ssn field (containing the Social Security number of the employee). The regular expression should match either a nine-digit number or a text string in the form nnn-nn-nnnn. If the testPattern() function returns the value false, set the value of the isValid variable to false. g. Insert a conditional statement that tests whether the value of the isValid variable is false. If it is false, then display the following alert message: Please fill out all required fields in the proper format. h. Return the value of the isValid variable. 8. Add a function named calcRow(). The purpose of this function is to return the subtotal of the expenses within a single row in the travel expense table. The function has a single parameter named row, which represents the number of the table row (from 1 to 4) upon which the calculations will be performed. Add the following commands to the function: a. Create a variable named travel that is equal to the numeric value of the travelrow field, where row is the value of the row parameter. (Hint: Use the object reference document.forms[0].elements[travel+row].value.) Be sure to use the parseFloat() function to convert the field value to a number. In the same fashion, create a variable named lodge that is equal to the numeric value of the lodgerow field and a variable named meal that is equal to the numeric value of the mealrow field. b. Return the sum of the travel, lodge, and row variables. 9. Create a function named calcTotal(). The purpose of this function is to return the total of all expenses in the travel expense table by calling the calcRow() function for each of the four rows in the table. The function has no parameters. Add the following commands to the function: a. Create a variable named totalExp and set its initial value to 0. b. Insert a For loop with a counter that runs from 1 to 4. c. Within the For loop, increase the value of the totalExp variable by the value returned by the calcRow() function using the value of the counter as the value of the row parameter. d. Return the value of the totalExp variable. 10. Create a function named update(). The purpose of this function is to update the expense values displayed throughout the table and to verify that the employee has entered a valid expense amount. The function will be called whenever the employee exits from one of the 12 expense fields in the table (initiating the blur event). Add the following commands to the function: a. Create a variable named numRegExp that contains the regular expression literal /^\d*(\.\d{0,2})?$/. This pattern matches any text string that only contains a number with or without two decimal place accuracy. b. Insert a conditional statement that tests whether the value property of the currently selected object matches the numRegExp pattern. (Hint: Use the this keyword to reference the currently selected object.) c. If the condition is met (meaning that the employee has entered a valid expense amount), then run the following commands: (i) Use the toFixed() method to display the value of the current object to two decimal places, (ii) Insert a For loop with a counter that runs from 1 to 4. Within the For loop, set the value of the subi field to the value returned by the calcRow() function, where i is the value of the For loop counter. Format the value to appear to two decimal places. (iii) Set the value of the total field equal to the value returned by the calcTotal() function. Display the total field value to two decimal places.

d. If the condition is not met (meaning that the user has entered an invalid number), then: (i) Display the alert message Invalid currency value, (ii) Change the value property of the current object to 0.00, and (iii) Return the focus to the current object. 11. Save your changes to the file. Open exp.htm in your Web browser. Test the operation of the travel expense table, verifying that it automatically updates the travel expenses as you add new values to the table. 12. Test the form validation commands by attempting to submit the form under the following conditions: (i) Without all of the required fields filled out and (ii) With invalid entries for the account, department, project, and Social Security number fields. The form should highlight the errors and alert you of the mistakes. 13. Submit your completed files to your instructor.