Project #6CMSC122
Due Thursday May 7 6:00 pmSpring 2009

Objective

To practice forms, data validation, and animation.

Grading

• (30%) Service Form Implementation
• (10%) Service Form Generates Expected Server Confirmation
• (50%) JavaScript Support
• (10%) CSS Style

Overview

For this project you will implement a web page with a form that allows user to apply for cable service. The data provided in the form needs to be validated before it is sent to the server for processing. You do not need to provide pseudocode for this project, but you are encourage to develop it for your own benefit. The following file(s) (project distribution) are associated with this project: Proj6.zip.

Specifications

You must define a form with the text fields and buttons you can see in the "Sample Run". The "Payment Method" is a combo box with two options: "Credit Card" and "Bill me". The following provides additional information about this project:

• Validation Requirements
  1. Your program must verify that a firstname, lastname, address, and e-mail have been provided. You do not have to verify the format of the data (e.g., e-mail format). By the way, you can obtain the characters of a string by using the charAt() function, where the argument is the index position of the character in the string.
  2. Your program must verify that at least one service has been selected. If no service has been selected your program must generate the message "No Service Selected".
  3. Your program must verify that at least one plan has been selected. If no plan has been selected your program must generate the message "No Plan Selected".
  4. Your program must have as default payment "Bill me".
  5. Your program must verify that a valid credit card number has been provided. A valid credit card number consists of four sets of digits, each with exactly four digits. In addition, your form must only allow four digits for each set of digits. If an invalid number has been provided your program must generate the message "Invalid Credit Card Number".
  6. Your program must verify that a valid expiration date has been provided. We consider valid dates those with month values between 1 and 12 and year values greater than or equal to 2009. If an invalid date has been provided your program must generate the message "Invalid Expiration Date".
  7. If after evaluating the data any errors are found, your program will not submit the form and will display a single message (using alert) where the fields with invalid data are identified. If the data is correct the form will be submitted.
• Functions Requirement
  1. It is up to you to define any functions you need, however, you must have at least two functions. All functions should be in the file named cable.js
  2. You should avoid duplicating code. That is, if you have the same code segment in many functions, you should create a function for the common code.
• Style Requirement
  1. The service request form must have a gradient background based on the provided gradientImg.jpg file.
  2. The style and appearance of your page should be very close to what you see in the "Sample Run".
• Server Processing
  1. The form data will be sent to the cableProcessing.php script found at the following address:
     http://www.turtle.cs.umd.edu/classes/122/cableProcessing.php
  2. You will use get as the submission method.
  3. The names to use for form fields are: firstname, lastname, address, email, cable, internet, phone, plan, payment, firstFourDigits, secondFourDigits, thirdFourDigits, fourthFourDigits, month, year, and comments.
  4. The values associated with cable, internet and phone fields are cable, internet, and phone, respectively.
  5. The values associated with plan are oneYearPlan, twoYearPlan, otherPlan.
  6. The values associated with payment are creditCard and billMe.
  7. The link Sample Server Script Execution illustrates an example of submitting data to the script. From this example you should derive the names to use for the form entries.

Additional Requirements

• You must name your html file cable.html and you css file cable.css
• You must use the fieldset and label tags for your form.
• You must use good identation.
• After validating your html include the W3C XHTML 1.0 logo.
• You must use meaningful variable names.
• Your html must validate according to http://validator.w3.org/#validate-by-upload
• Your css must validate according to http://jigsaw.w3.org/css-validator/

Sample Run

The service request video illustrates the functionality associated with the service request form. For better results use QuickTime as your player.

Submission

Submit your program using the submit server available at: https://submit.cs.umd.edu:8443/. After submitting your project make sure you download the submitted file and verify that what you have submitted is correct. Please do not e-mail your project.

Academic Integrity

Please make sure you read the academic integrity section of the syllabus so you understand what is permissible in our programming projects. We want to remind you that we check your project against other students' projects and any case of academic dishonesty will be referred to the University's Office of Judicial Programs.