| PROJECT 2: FORM VALIDATION
 Project Description
One of the most common uses of client-side JavaScript is to validate form data. When we say "validate" form data, we mean ensuring that the data entered is clean, error free, formatted correctly, and meets certain criterion. The validation of input data is crucial because it ensures that the data is captured in a format that can be used most efficiently. Web designers and developers use client-side JavaScript as one method for validating user-inputted data. The purpose of this project is to build an HTML5 registration form and use JavaScript functions to validate user-inputted data. | ![JavaScript - Form Validation 2]()
| | Screenshot image of what your form should look like when completed.
This is a screenshot - The image is not clickable. |
Project Requirements
Create an input from using HTML5 and JavaScript. The form will validate and collect information form the user and then e-mail the result to your personal e-mail address. | Fields | Validation | | Name | The use is required to enter a first and last name. You must create two text boxes (one for the first name and one for the last name). Neither field must be blank. Include default text in the first and last name fields. Remove the default text once the user selects the field.
First Name and Last Name Field Types: Alpha only. | | Address | The user is required to enter a valid mailing address. You must create three separate text boxes to gather city, state, and zip code information. The address can not be blank.
Zip Code: Numeric only (5 digits)
Address Field: Alphanumeric characters
City: Alpha only
State: (Selected from a pull down menu) The user must select a state. | | Phone Number | The user must enter a valid 10 digit phone number, including area code. You must create two text boxes to gather the user's phone number. These fields can not be blank.
Area Code: (3 digits)
Phone Number: (7 digits) | | E-mail Address | The user must enter a valid e-mail address that follows the standard e-mail convention <[email protected]>, where the length of "name" can be up to 64 characters in length, and "domain" may be up to 252 characters in length.
If an invalid e-mail address is entered, the user should receive a message similar to "You have entered an invalid e-mail address". | | Confirm E-mail Address | The user must enter in the exact same e-mail address entered in the previous E-mail Address field. If not, an error message will be generated. | | Meal Preference | The user must select a meal preference from a radio button list (Vegan, Vegetarian, Non-Vegetarian). | | Contact Method | The user must select at least two of four contact methods listed on the form. An error message will display when less than two (zero or one) methods are selected. | | Comments | Optional field for additional comments. Field length (250 characters). This field can be blank. |
| Buttons | Function | | Submit | The Submit Button, when clicked, will display all of the errors on the form. If errors exist on the form, the form data will not be e-mailed. Once all errors have been removed AND all of the default text has been replaced, data entered into the form will be transmitted via e-mail. The Submit Button should call the submit () event handler function. | | Reset | The Reset Button will reset all of the fields on the form to a blank state. The Reset Button should call the reset () event handler function. |
Use // to document your code by providing comments that explain the purpose of all lines of code you write.
Submission Requirements
Please complete the following: Host your working registration from online using the Nova Server (provide the URL in your submission). Submit the HTML files you used to create the registration form to the Project's Assignments Folder. Write a Project Reflection (see description below).
Project Reflection
Answer the following questions when you submit your assignments files. What issues or challenges did you face completing this project? Did you complete the Advanced Challenge? If so, which challenge items did you complete?
Please submit your Project Reflection as a Microsoft Word document or just copy and paste your answers in your Assignments Folder's text box when you submit your assignment along with the rest of the required project files.
HTML Validation
Your pages should validate without errors using the W3C HTML Markup Validation Service at http://validator.w3.org. How to do this: Publish your pages to Nova Go to the W3C validator and paste in the URL to your index.html page Select the check button
Helpful Resources
This assignment will require you to interact with the DOM. The links below highlight specific concepts and topics that you will need to learn in order to complete this assignment successfully. W3schools.com > JavaScript Forms
https://www.w3schools.com/js/js_validation.asp
Advanced Challenge
This assignment will require you to interact with the DOM. The links below highlight specific concepts and topics that you will need to learn in order to complete this assignment successfully. Add at least 2 additional fields and validate them.
Add a company logo at the top of the form.
Due Date: APRIL 23 - 11:59 PM EASTERN TIME (ET) Late Penalty: 10% (2.5 points out of 25 total for the assignment) reduction each day (24-hour period, starting at the midnight due date deadline) the assignment is late. For example, if you are three days late, your grade will be deducted 7.5 points, leaving you with a 7.5/25, which is a grade of 70 (C). After 5 days, late assignments will not be accepted or graded. Your Assignments folder will be closed at this point as well and you will not be able to to physically submit the assignment.
Exceptions may be allowed, on a case-by-case basis, for life situations (military deployment, medical illness, death in the family, etc). In all cases, timely notification of a "life situation" is critical to the approval of any extensions. All exceptions must be accompanied by official documentation, which is subject to inspection and approval. Work load, course load, vacations, or bad memory are not acceptable excuses.
Running Close to the Deadline? Please do not wait until the last minute to submit your assignment. Give yourself at least a 5-hour window to account for any technical difficulties that might arise. If you experience technical difficulties beyond your control that do not allow you to successfully complete the assignment, immediately follow the steps below:
Step 1: Contact UMUC 360 Help and Support. Inform them off the problem you are having. Get a problem ticket number from them to document the situation.
Step 2: E-mail me ASAP and include a description of the problem you are having and your problem ticket number from 360 Help and Support, so I can investigate the situation.
Step 3: Attempt to attach your assignment to a message to me inside of LEO.
Step 4: E-mail the assignment to me.
Grade Value
This project is worth 25 points or 25% of your total grade for the course.
Grade Reductions
You will lose points for issues such as: not following directions, not submitting your work on time, and failure to include all required elements. Each omission will result in a partial point deduction.
Submitting Your Assignment
To complete this project and receive full credit, you must submit your completed presentation to your Assignments Folder unless you encounter problems--discussed above).
CYA (Copy Your Assignment)
Please make sure you keep a copy of your project stored on your computer. Technical difficulties do happen--you may need to resubmit your assignment for a number of reasons. It is always a good policy to CYA!
Having Problems?
Please contact me in advance if you are having problems understanding what is required of you.
Do Your Own Work
UMUC has strict policies regarding turning in work that is not 100% your own creation. I will enforce these policies. Verify Your Assignment Has Been Posted ( ** Very Important ** )
It is your responsibility to make sure you have posted your assignment CORRECTLY! Once you have posted your assignment, immediately attempt to view it, just to make sure your post was accepted by LEO, that it is formatted correctly, and you have posted the correct file.
NOTE 1: You will be held responsible for posting your assignments correctly. |
