COM271—Task 8
Advanced Form Validation
Given 10/30 | Due 11/1
Syllabus | Table of Pages | Assignments | References and Useful Links
Save the previous assignment to a new page (e.g., ...advanced_form_validation.shtml) to begin this assignment.
The alert-box driven approach to form validation in the previous assignment should be replaced with a dhtml form. That is, we are going to use JavaScript to detect errors, then alert the user with appropriate messages and feedback on the form itself.
There are a couple of approaches that you may want to use. Choose one of the following.
Approach 1 (option 1 of 2):
Individual error messages posted above teach input field:
Begin by inserting appropriate error messages directly above each section on your form. For example, insert 3 paragraphs above the input boxes for name:
- Enter first name.
- Enter middle initial.
- Enter last name.
In you page's style sheet, select all of the error messages and set their visibility attribute to hidden (e.g., nameFirst, nameMiddle, ... {visibility:hidden;...other styles}. None of the error messages will appear on the form. You might also set their color to red, etc., so that they will be distinctive when they appear.
Within the JavaScript function for form validation (e.g., validate()), replace code that would generate an alert box warning with code that would 1)change the visibility of the appropriate error message to visible, and 2)highlight the appropriate input box by changing its border and/or background color to something distinctive (e.g., red border, pink background).
You will also want to return the focus to the first error on the form (using the javascript focus() method— e.g., nameFirst.focus() ). This may require that you evaluate errors from bottom of the form to the top.
When the form has no errors, reward the user with a message that says, "Congratulations, the form is now ready for submission." Of course, you'd never do this, but for this exercise, that's as far as this form is going!
Approach 2 (option 2 of 2) (RECOMMENDED):
See notes on Form Validation, which will walk you through this task.
A single error div with one or more messages, posted above or to the side of the form:
Here, we would build a single string of error messages. Start with a variable to contain this string, created outside of any function (at the top of your script) so that it has global scope; set the string to be blank before starting your validation (i.e., as the first line of the function validate() as we did in the simple form exercise.
Begin by creating, styling, and positioning a div, <div id="errors"></div> Position it above or to the side of the form.
Modify each error checking function such that the error message added to the global error string is complete html (not a string for use in the alert box).
If, when you are done with the entire form check, there is an error (the string is no longer blank), copy the string to the error div using document.getElementById('errors').innerHTML=strerrors.
Also modify each error checking function so that the input box containing the error is restyled (e.g., background or border color change) to provide user feedback on the location of the error.
As for option 1, above, when the form has no errors, reward the user with a message that says, "Congratulations, the form is now ready for submission." Of course, you'd never do this, but for this exercise, that's as far as this form is going!