CSCI E-3 Unit 3 Project, Part B

Unit 3b Homework will exercise the DOM, browser Events and form handling. This assignment is worth half of the total point value for the Unit 3 project. The other half was Unit 3 Project: Part B, previously distributed as a ZIP file. You should complete Part A before working on Part B.

Add behavior and additional functionality to an HTML FORM

You'll be adding behavior to the form below, including adding some new form fields and sections. You will be adding some of the following behaviors and features to the form.  Specifically, you must do four of the six (your choice) items below. Doing more than the minimum counts as extra credit.

You may change the HTML if you like, to make a form that better fits your interests, make it look better, or provide a better user experience. You must make it clear to your grader which of the six behaviors you've implemented—this will be especially important if you change the form.
  1. There are two password fields on the form. You will write code that ensures that:
    1. Users must enter passwords of at least 8 characters.
    2. The two fields must match.
    3. Users receive feedback immediately if the passwords don't match, rather than only when the form is submitted.

  2. There is a textarea on the form labeled Brief Bio. This is going to be really brief. Your code will provide a countdown near the 140 character limit caption that counts backwards from 140 to zero to show users how many characters they have left.  You may make it so that once the limit is reached, no more characters show in the field, even if the user keeps typing. Alternatively, you may choose to let users keep typing, but have the page show users how far over the limit they've gone.

  3. Sometimes a selection in a pull-down menu (an HTML SELECT) should populate another SELECT field with complimentary values.  For example, if we're selecting cars, picking "Ford" in the Make field should populate the Model field with Ford models, such as the Focus, the Fusion, and the Flex, while picking "Dodge" might populate the Model field with values that include Charger, Challenger, and Caravan.

    Your task is to make the two complimentary SELECT controls work in this way—selecting a value in the first populates the second with appropriate choices. The types of values are entirely up to you— automobile Make/Model is just an example. 
  4. Your form should have at least one subsection which will appear depending on the value selected in a checkbox, radio button or SELECT. For example, if the user selectsed a checkbox called "add my Twitter account", a section of the form will appear prompting the user for their Twitter username. You may add this feature anywhere on the form.
  5. Phone number: While it's easy to validate a phone number to make sure it matches the HTML5 validation pattern, it is even better is to reformat one to make it match. For this field, the user may enter any ten-digit number in either xxx-xxx-xxxx, (xxx)xxx-xxxx or xxxxxxxxxx form.

    Your validation should confirm that it's a ten-digit number, regardless of the punctuation used, and format it in the input field as xxx-xxx-xxxx.  You may do this by applying the formatting live (difficult), or waiting until the user has finished typing in the field (onchange or onblur) and then reformat the string (easier). It's up to you.

  6. Upon submitting the form, make sure that at least one of the Phone or Email fields are completed. One or the other, or both, may be filled in, but both cannot be blank. Provide a useful message to the user if they fail to complete one of these fields.

Password must be between 8 - 10 letters or numbers
Repeat Password:
Passwords don't match

Login Info

   Brief Bio
Limit: 140 characters. You have left.
Select Your Favorite Food
Select Your Usual Order Size

Select Your Favorite Drink

Contact Info


City                                        State                        Postal Code



About You