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.
-
There are two password fields on the form. You will write code that
ensures that:
-
Users must enter passwords of at least 8 characters.
-
The two fields must match.
-
Users receive feedback immediately if the passwords don't match,
rather than only when the form is submitted.
-
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.
-
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.
-
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.
-
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.
-
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.