Purpose: To develop skills for client-side form checking using JavaScript

Part I of this assignment (Task 6) uses Meyer, project 7: Making an Input Form Look Good. Work through the project as preparation. We will review forms and provide code samples in class (see syllabus).

Part II (Task 7) is based on materials covered in class and through examples (see syllabus).

I (task 6). Form content: Use <formset> and <legend> tags to group information (personal and contact groups). Use CSS to make this an attractive and space-efficient screen. Develop a simple 2-part form, with sections for personal and contact information, as follows:

• Personal Information
  • First Name^*
  • Last Name^*
  • Gender (male or female)
• Contact Information
  • Street Number^*
  • Street Name^*
  • City^*
  • State^*
  • Zip code^*
  • Telephone (including area code)^*

II (task 7). JavaScript Requirements: For all starred fields (^*), make sure (using JavaScript) that there is an entry, prior to form submission. If there is missing information, let the user know using a simple alert box. For other fields, make sure that the entry conforms to the following rules:

• First and last names must be entered as letters only.
• Gender should be either male or female (must choose)
• Street number must be entered as a number only.
• Street nme and city must be entered as letters only.
• State should be selected from a drop-down menu of 2-character state abbreviations (e.g., RI)
• Zip should be five digits (e.g., 02881).
• Telephone should include area code and nothing but numbers (hint: use three input boxes)

Your JavaScript should go through the entire form, one entry field at a time. For each deficiency encountered, notify the user via an alert() box. When all required fields are properly filled out, notify the user that the form is properly filled, again using an alert() box.

Note: We will be improving this form validation in task 8, but for now, handle errors one at a time using a simple alert box.