LD07: JS Events and Form Validation due Thu 12 Oct 13:20

Preparation for Lab Day

In preparation for lab day, do these actions:

1. In your webspace create a directory named hw07 and work in it.
2. Copy poemlayout.html (and all files needed to support it) from hw06 into hw07.
3. Visit the page and verify that the page works properly.
4. Take the code that performs the action of sliding up the lorem ipsum section and put it into a function called slideUp.
5. Create a dynamic event handler that will call the slideUp function when the lorem ipsum section is clicked on. The final result should be that the slide up action does not occur until the section is clicked on.
6. Commit, save, and push your changes.

On Lab Day

1. Begin by showing your working prelab program to the instructor.

2. Continue working in hw07. Add a new text box for phone number to your form that is used to submit a poem. So your form should have two text boxes, a drop-down, and a text area.

3. Write a Javascript function called validateForm that is called when the form is submitted. That is to say, register the validateForm function as the event handler for the onsubmit event of the form. Initially the validateForm function should simply cancel the submit event so that the form won't actually accomplish a submit action:

   	function validateForm(evt) {
   		evt.preventDefault();
   	}
   

   Test this behavior. You'll know it is working if there are no errors in the console log and if the specification action on your form tag doesn't happen.

4. When accepting values from a text box it is usually desirable to remove any leading or trailing whitespace that may be entered by the user. Javascript provides a trim() method in the string class for this purpose. See: https://www.w3schools.com/jsreF/jsref_trim_string.asp. Modify your validateForm function so that it trims whitespace characters from the name text box. It should store the trimmed name back into the text box. So, now when you submit the form, any leading a trailing spaces should be removed and it should be reflected in the form.

5. After the name has been trimmed add code that will display an alert box if the name is invalid. A name is considered to be invalid if it contains any characters other than letters, hyphens, or spaces or if it has fewer than 2 characters. NOTE: I am aware of the fact that the above rules for names will allow some rather unusual “names”!

6. Now follow the same steps for the phone number field:
   1. Trim it.
   2. If it is not a valid phone number give an alert box. HINT: Use the regular expression you developed in the previous lab day to help here.

7. You may be finding that it is annoying to have to keep clearing alert boxes. So, let's replace the text boxes with messages that actually appear on the form itself by using these steps:
   1. Create a span tag that immediately follows the name text box. Give the span a class called “error” and an id called “name-error”. In the span given an appropriate error message to be displayed if the error is not valid.
   2. In your main CSS document provide styling so that any span with a class of “error” will have reddish text. Verify that the message is showing.
   3. Normally we don't want error messages to show until we actually have an error. So, add an additional CSS rule to hide all spans that have a class of error.
   4. In the validateForm function remove the alert command that displays an error for an invalid name and add a command that will change the CSS property of the appropriate span to be visible.

8. Make similar changes in order to replace the phone alert box with a more pleasant error message that appears if a form submission is attempted with an invalid phone.

9. As you test your new-improved form you may notice that if you generate errors for both name and phone and then fix one of them but not the other it appears that you still have an error in both. A typical way to fix this behavior is at the top of the validation function add code to hide all error messages. Make that change now.

10. Add logic to your validateForm function so that instead of preventing the default action all of the time, it should do so only if one or both of the name/phone fields is invalid.

11. Commit and push your work to bitbucket.

12. Show your work to the instructor. If you finish early you can start work on the homework assignment.