ASSIGNMENT 6

Using JavaScript for Client-Side Forms

Due: Thursday, March 13, 11:59:59 pm - due to air conditioning failure

Document status: DRAFT
Last update:  02/25/08  


A. Client-side Form Validation (80 pts.) 

In assignment 5, we used a CGI script at the server-side 
to validate the form data.  However, it is more efficient to use 
JavaScript techniques to validate form data at the client-side 
before they are sent to the web server. 

In this assignment, you will create a static HTML page that will be 
the starting point of your final project.  This page will be used to 
request a resume. The form data must be validated before the they 
are sent to the server. The Javascript code must check that required 
data has been entered according to the specifications listed below.

Required data are:

first name (must not be empty),
last name  (must not be empty),
address    (must not be empty),
city       (must not be empty),
state      (must be a string of two letters, 
            change to in upper case, if necessary),
zip        (must be a string of five digits),
email      (a string that must contain one '@' and at least one '.')
area of expertise (give at least two choices; one must have been
                    checked to be valid form data)

If one or more data fields do not meet the requirements, the form and 
data must not be sent and the user must be asked to change or supply the
data, with a message indicating the problem.

Set the 'action' attribute of the form element to

  action="http://cgi-cmsc.cs.uchicago.edu/~sterner/cs101/hw6/reflector.cgi"

Only when the data has been validated and found correct must it be sent to 
the server.


Sample validation scripts can be found at:

http://www.classes.cs.uchicago.edu/current/10100-1/html/javascript/validationExamples.html

Note especially the regex case. The entire JavaScript reference can be found at:

http://www.classes.cs.uchicago.edu/current/10100-1/html/javascript/


B. Browser detection (20 pts.)

Following the examples given in Chapter 9, (pp. 157-161) of Estrella: Web Wizard's Guide to JavaScript and/or the handout from class of chapter 8 of McGrath: JAVASCRIPT. Include browser and platform detection code in your form page.  This will make use of the "navigator.appName" property.  The page should display the operating system and browser description at the bottom of the HTML form page of part A.