Assignment #4

Objective

To practice forms, data validation, and data collection.

Grading

(30%) Form Implementation
(10%) 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 the gathering of data for research purposes. 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: a4.zip.

Specifications

You must define a form with the text fields and buttons you can see in the "Sample Run". The "Study Information" section includes a combo box with two options: "Long Term" and "Short Term". The following provides additional information about this assignment:

Validation Requirements
1. Your program must verify that a first name has been provided. The message "Invalid firstname" will be generated if an invalid first name is provided.
2. Your program must verify that a last name has been provided. The message "Invalid lastname" will be generated if an invalid last name is provided.
3. Your program must verify that an e-mail has been provided. You do not have to verify the e-mail format. The message "Invalid email" will be generated if an invalid e-mail address is provided.
4. Your program must verify that a valid phone number has been provided. A valid phone number has the format
  ### ### ####
  where # is a digit. The message "Invalid phone number" will be generated if an invalid phone number is provided.
5. Your program must verify a valid age value has been provided. Age values must be larger or equal to 1 and should be numbers that do not have more than 3 digits. The message "Invalid age" will be generated if an invalid age is provided.
6. Your program must verify a valid height value has been provided. The height is specified in feet/inches. The inches value should be between 0 and 12. The message "Invalid height" will be generated if an invalid height is provided.
7. Your program must verify a valid weight value has been provided. Weight values must be larger or equal to 1 and should be numbers that do not have more than 3 digits. The message "Invalid weight" will be generated if an invalid weight is provided.
8. Your program must verify that at least one condition ("High Blood Pressure", "Diabetes", "Glaucoma", "Asthma", "None") has been selected. If no condition is provided yout program must generate the error message "No conditions selected". If the user selects any condition and also "None", then your program will generate the error message "Invalid conditions selection".
9. Your program must verify that at least one time period ("Never", "Less than a year", "One to two years", "More than two years") has been selected. Your program will generate the message "No time period selected" if none has been selected.
10. Your program must verify that a valid study id has been provided. Valid ids have the following format: A### B### where # is a digit. Your program will generate the message "Invalid study id" if an invalid id is provided.
11. 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 a confirmation message ("Do you want to submit the form data?") will be displayed asking for a submission confirmation.
12. 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.
Functions Requirement
1. It is up to you to define any functions you need but you must have at least two functions. All functions and most of the javascript code should be in a file named research.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 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".
3. Style information should be in a css file named research.css.
Server Processing
1. The form data will be sent to the researchProcessing.php script found at the following address:
  http://www.turtle.cs.umd.edu/classes/122/researchFormAssignment/researchProcessing.php
2. You will use get as the submission method.
3. The names to use for form fields are: firstname, lastname, phoneFirstPart, phoneSecondPart, phoneThirdPart, email, age, heightFeet, heightInches, weight, highBloodPressure, diabetes, glaucoma, asthma, none, period, studyType, firstFourDigits, secondFourDigits (these last two correspond to the study id), comments.
4. 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 research.html.
You must use the fieldset tag.
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 data submission video illustrates the functionality associated with the form.