To incorporate JavaScript, CSS, and DHTML into online forms
Instructions
For this lab you will need to build the form described below and validate it, informing users of errors with JavaScript/DHTML that will mark incorrect or incomplete form fields and their labels in red. The lab should also dynamically generate field specific errors that should be displayed at the top of the form.
The form should contain the following fields at a minimum:
- First name
- Last name
- Middle initial
- Street Address
- City
- State
- Zip Code
- Username
- Password
- Password Confirmation
- User Agreement
The javascript you write to validate this form should confirm that none of the information is missing at the time the client submits the form and the two password fields should be confirmed to contain the same value. The user agreement should be a control that allows the user to signify that they have read and understood a user agreement (which doesn't really exist so don't worry about having one) that must be marked 'Yes' or something similar before the form will be submitted.
In this lab the form should have the ability to mark fields and their labels in red if it is determined that there is problem with any particular field. For example, if the user forgets to type their first name in the firstname field, when the form is submitted, the javascript should recognize that the first name is missing and should, in response, color the 'First Name' label appearing next to the firstname field red (bold would also be nice) and put a red box around the first name field.
At the time that a user focuses a red marked field (onfocus), the javascript in your page should change the color of the field label back to regular black and remove the red box around the field indicting that the user has corrected the error.
If the user then resubmits the form and an error still exists, the field should be changed to red again.
You are welcome to make any further refinements to the form that you feel are appropriate and you should correct any problems that you had with the first version of this form.