Description
Unit 4 Assignment 1 – Form Field Validation
and Error Messages
Overview
You have created a basic form and
added interactivity to images using JavaScript. Now it is time to validate
information entered into your form fields. You will use the
"registration.html" file found in your Zip file. You will see that the
page has a form with the following fields to allow users to register for
an account. The items in parentheses are defined formatting instructions to be
observed for each field.
- Username* (must only contain letters and numbers) –
Required field
- Password* (minimum of 8 characters) – Required field
- PasswordVerify* (minimum of 8 characters, must match
password) – Required field
- FirstName* (text string) – Required field
- LastName* (text string) – Required field
- Email (uses xxx@xxx.xxx format)
- PhoneNumber (uses (xxx) xxx-xxxx format)
- SignUpNewsletter (radio box for yes/no)
Directions
Read the assignment overview.
Use the registration.html file to
add functionality to the form found on the page. The JavaScript that you
write should validate each field and, if errors are made, display
appropriate error messages that direct the user to complete the form properly.
Once the form is completed, your script should open the confirmation page
(confirmation.php).
Requirements:
- Write JavaScript that defines that a field is required
and generates an appropriate error message if the field has not been
completed using best practices in error reporting that includes all
relevant error messages at once in an easy-to-read manner.
- Write JavaScript to validate all input fields per the
formatting definitions that the field values should be checked against
(found in the overview) after each field with regular expressions in the
most effective manner according to coding best practices.
- Write JavaScript that displays an appropriate error
correction message (next to the field) in the event a form entry error has
been made.
- Write a JavaScript that will default the user’s cursor
to the first erroneous input field while providing additional formatting
change to indicate the selected field to the user.
- Create a submit button that executes the validation
when submitted and runs error-free as the submit is overridden, producing
the confirmation.php message.