HW07: JS Form Validation due Mon 13 Oct 23:59

Purpose

• Continue practice handling various Javascript events by writing dynamic event handlers.
• Use Javascript commands perform form validation.

Context

• Doing the right thing matters.
• Doing the right thing means developing competence.
• Doing the right thing means living in community.
• Doing the right thing means finding moral, effective, and correct solutions.
• Doing the right thing means honoring God in all we do.

So, do this assignment in a way that demonstrates integrity, develops competence, is correct, and honors God ... because what we do matters!

Allowed and Disallowed Resources

• The quick reference guides below (which include the printed guides handed out in class):
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/HTML5-Visual-Cheat-Sheet1.pdf
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/HTML5-cheat-sheet.pdf
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/css-cheat-sheet-v2.pdf
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/css3-cheat-sheet.pdf
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/csscheatsheet.pdf
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/html5-cheat-sheet.pdf
  • https://josephus.sergeantservices.com/classes/w1/source/quickreferences/main_css-flexbox-cheat-sheet.pdf

• VSCode Editor in its configuration as provided in the course repo. You may use the extensions that were suggested when you first launched VS Code in the repo directory.
• The instructor-provided notes for this course: https://docs.google.com/presentation/d/1NvzTydQUHc8_-bX2oH1hyzSbFMYByCsp/edit?usp=sharing&ouid=102845346193600525432&rtpof=true&sd=true
• Your own course notes
• Your instructor
• Discussions about the assignment with other students as long as you never look at the working code of another student. Another student should never tell you what to type and you should never tell another student what to type.
• Websites that provide general instruction on HTML and CSS as long as they are not targeted specifically to the assignment on which you are working. As an example, if you want to learn about techniques for applying a color scheme to a web site, this is a good thing to look up. If you are looking for a solution to a specific Javascript programming exercise given in a homework assignment, that is NOT something you should look up. REMEMBER: The goal is for you to become proficient, so you need to figure some things out.
• Examples provided at: https://josephus.sergeantservices.com/classes/w1/source/

You may NOT use/access:

• Resources not expressly listed above, including, but not limited to, the following ...
• Code-producing extensions to VSCode that are beyond the default configuration (such as code completion, CoPilot, or other AI-enabled extensions).
• Code produced by code-generating tools of any kind (ChatGPT as one example).
• Code produced by other people (including classmates) that is targeted to solve the specific assignment you are working on.

Failure to abide by these guidelines will result in a zero for the assignment and the incident will be reported to the university provost as a violation of the university academic integrity policy. A second incident of academic dishonesty (whether from this course or another computer science course) will result in an F in the course.

Finish Lab Day Work

• Provide error messages on the form itself when the form is submitted (when error messages are needed).
• If there are not error messages the form should submit normally. If there are errors the form should not submit.
• The form should display all appopriate error messages when applicable and should not ever display error messages when not applicable.

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 the .querySelectorAll() command to produce a list of checked values and then inspect the result:

  let checkedRadios = document.querySelectorAll('input[type="radio"]:checked')
  // Remember, this returns an array-like structure that in this case show all the checked
  // radio button.
  

• 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 any 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 GitHub.

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

Commit your work and push it to GitHub.