Computer Science 180
Web Design

Fall 2011, Siena College

Home     Syllabus     Schedule

This week, you will gain even more experience with JavaScript by adding validation to a given form.

You may work alone or with a partner on this lab.

Additional Class Examples

Look back through the examples related to form validation and take a careful look at the examples we did not get to in class (agree.html, invoicenumber.html, and phonenumbers.html). Make sure you understand each. Pay special attention to the last one: the validation of phone numbers. phonenumbers.html.

You will be using most of the techniques you see in the examples, so be sure you understand them before continuing on.

Validating a Large Form

Save this document into your work area for this lab and open it in your favorite web authoring tool. It contains a fairly long form, layed out reasonbly nicely, but without any validation or other processing of the data entered.

Your primary task is to fill in the pressed JavaScript event handler. You should:

1. Validate each field as appropriate. Some fields are required, others are not. Some should have only numeric values, or be in a specific format. In particular:
   • First name and last name are required. Middle initial is optional, and may be at most a single letter. You may place appropriate restrictions on the format of a first or last name.
   • All components of the address are required except the second address line. A city must be entered and a state must be selected.
   • For the home phone and mobile phone entries, you may use a single input (as in the given document) that accepts phone numbers in many reasonable formats, or replace each with a group of three text inputs that accept the components of a phone number. Either is fine, but both should use the same approach. The home phone is required. The mobile phone is optional.
   • The two email address fields must match. You should apply some validation rules beyond just requiring that the field has some value. See if you can require that the email address contains one @ character, and that it includes at least one . after the @. Use this rule to validate the first email input but just require that the second match the first.
   • The password fields must match. Develop some password requirement along the lines of "must contain at least one capital letter" or "must contain some punctuation" and validate for that.
   • The credit card information is all required. The credit card number format depends on the credit card type. There are many rules we could try to apply to validate credit card numbers, but the following will suffice:
     • An American Express number is 15 digits, and must start with "34" or "37".
     • A VISA number is 13 or 16 digits, and must start with a "4".
     • A MasterCard number is 16 digits, and must start with "51", "52", "53", "54", or "55".
     • A Discover number is 16 digits, and must start with "6011".

     Your form should accept valid card numbers with or without spaces included.

     For an expiration date, you may use a single input (as in the provided starter document) and validate that it is in an appropriate "MM/YY" or "MM/YYYY" format, or create menus for reasonable months and years. You need not worry if the date is in the past unless you wish to do so.

   • Gender is optional, but if none is specified, you should report it at the end as "unspecified".
   • The terms of use checkbox must be checked for the form to be accepted.
2. Once all form elements validate properly, your function should add a nicely-formatted summary of the data entered into the <div>, and hide the form.

Much of what you need to add is in class examples. Use those! If you get stuck, especially on those parts that are a bit different from what you saw in class examples, don't hesitate to ask!

Submitting Your Work

Before 1:30 PM, Monday, November 14, 2011, submit your files for grading. There are three things you need to do to complete the submission: (i) make sure your page is uploaded properly to the class web space and is available at your URI, (ii) update your main index on the class web space to have links to the document you have created for this lab, and (iii) email a copy of your file to me at jteresco AT siena.edu. If you worked with a partner, you need only upload to the account of one of the team members, but each team member should link to the page on his or her own main index. Make sure your page validates properly as XHTML Strict.

Grading Sheet

This lab is worth 30 points, which are distributed as follows: