Dynamic HTML and Form Validation. How do I properly complete this?

Part 1: Dynamic HTML.

you will modify your email web form. You will be modifying the web page to use JavaScript to dynamically alter the contents of the page based on user input. The page will give the user the choice of either submitting a help request form or filling out a general feedback form. You may want to start by copying the HTML5 code from the previous assignment into a new web page in a new directory on your WSD website, but remember to update the subject field with the new assignment number and remove my address from the "CCAddress" field until you have completed your testing!

• First, add a new form to the web page with one element, a drop-down select box. The select element will have two options: one that allows the user to fill out a help request form, and one that allows the user to fill out a general feedback form. Based on the user's selection, it will then use an event handler and the W3C DOM to dynamically display the appropriate form and relevant instructions. The selected form will be submitted to the same Form to Email Script we used in the previous module which will generate the appropriate email.
• The new select box will need to use an event handler to call a JavaScript function that will display either the feedback form or the help request form. The JavaScript function can work in several different ways.
  • One possibility would be to dynamically write the HTML5 code for the chosen form into an existing block element via the "innerhtml" property.
  • Another choice might be to have multiple hidden block elements in your page's body section, one containing the feedback form and the other the help form, and the JavaScript function would then just reveal the chosen form.
  • There are other possibilities as well. However, you should avoid using pop-up windows to display the chosen form, and instead use JavaScript to dynamically display content within the existing page. Any other approach is acceptable, provided the forms are not initially visible when the user first comes to the page, the JavaScript display function reveals the appropriate form, and you account for what happens if the user changes his mind and selects one form first then changes to the other. You should not rely on the browsers back button to solve this requirement.
• You will also need two forms where the user can enter his or her information.
  • The first form is a feedback form, which can basically be the same form you used in the previous assignment.
  • The second form is a new form that will be used to send a user's "help request" to the designated email addresses.
    • The help request form will be very similar to the feedback form. It should include almost all of the same fields, but instead of a radio button for rating the site, it should include check boxes that let the user specify whether he would prefer to be contacted by email or telephone (or both if either is acceptable).

Part 2: Form Validation.

Once your Dynamic HTML is finished and your page allows the user to select which form to display, the next portion of the assignment is to add some user data validation. You will use JavaScript to check the information the user enters to make sure it is valid before it gets submitted to the server and sent as an email.

• You will need to add additional JavaScript functions to your page that will make sure all required information is available when the user submits the chosen form.
  • Your JavaScript functions should only submit the form if all the required data is filled in and valid.
  • If any required information is missing, or determined to be invalid, then your JavaScript functions should provide appropriate feedback to the user with instructions on what needs to be corrected.
  • You should review the information on data validation I posted in Module 2, and you will need to decide what information is required, and what content validation you need to perform on the fields in your forms.
    • For example, while a street address would be impossible to validate (other than whether it is empty or not), email addresses are always in the same format and are relatively easy to validate to make sure they have a valid format.
• You will need to modify your feedback form and help request form to show the user which fields are required.
  • In the feedback form, at least the text area must be required. However, in the help request form, the name field, text area and check box fields should be required.
  • In addition, if the user checks the box indicating that he would prefer to be contacted by email or telephone, you will need to make sure the appropriate fields (email address or telephone number) are treated as required, and that the email address is in a valid format.
• You should validate your page using the W3C Markup Validation Service.
  • The validator will check your page for conformance to the appropriate specification that you are using.
  • Fix any non-compliant code, and once the page is valid, take a screenshot of your validation.
• Finally, once the page is complete and validated, modify both the help and feedback forms' "CCAddress" hidden input element to have a value that lists your instructor's email address. Then submit one sample feedback and one sample help request so that I will receive a copy of them in an email generated by the form.
• Finally, add a link to this assignment's page to your WSD Portal page, then come back here and submit your assignment, including a word document that has a link to your assignment's web page and the screenshot of your validation, and attach your HTML5 files as a zip.

How do I properly do this?