HW07: JS Form Validation due Tue 17 Oct 13:20


In this assignment you will:

Allowed and Disallowed Resources

The guidelines for allowed and disallowed resources are the same as given in homework 5.

Finish Lab Day Work

If you haven't done so already. Complete your lab day work. Your final form should:

Part 1: Complete the Poem Page Form (12 pts)

Add Radio Buttons to Your Form
Continuing working on the form in poemlayout.html. Add a form element to the form called “Poet Rating” that will provide a set of radio buttons that will allow the poet to rate themselves as one of the following: Beginner, Intermediate, Advanced. The buttons should be attratively arranged and labeled in accordance with your color scheme.

Modify the Poem Type Dropdown
It is common, when creating a drop-down select box to have the first option provide instructions rather than be a valid entry. One reason for this is that sometimes you don't want to have a “default” value, but rather to know that the user has explicitly chosen something. In this case, the first/default entry should say something like: “Select Poem Type ...”.

Validate All Form Elements
Using the same techniques as from the lab day exercise, continue adding form validation to the form as follows:
  • Verify that exactly one radio button in the Poet Rating has been selected. Radio buttons can be a hassle to work with. Rather than checking each one individually based on its id value you can use one of the ideas here to check it more efficiently: https://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-with-javascript
  • Verify that one of the poem types (not ”Select Poem Type ...") has been selected.
  • The Poem Title should be trimmed of trailing and leading whitespace and can contain and characters and should have at least 3 characters.
  • The Poem itself should also be trimmed and should contain at least 10 characters with no restriction on the types of characters.

The error messages should use the same styling and methodology as prescribed in the lab day exercise. Commit your work and push it to bitbucket.

Part 2: Add Validation to Personal Site (12 pts)

If you haven't done so already, copy the most recent version of your personal site into the hw07 directory. Now use the same techniques to add trimming, validation, and well-formed error messages to the form on your personal site.

Commit your work and push it to bitbucket.