Assignment 3 – Form Validation with JavaScript
Objectives
Learn to use the features of HTML 5 and Javascript to create input forms with validation
Supports Outcome 4
4 – Ability to use client side scripting languages (DHTML, Javascript) to add interactivity to web sites.
Assignment
You are going to create an input form using HTML5 and Javascript. This input form will not submit any database to the server (you learn to do this in COP4834). It will validate and collect information from the user and go to a confirm page that displays the information entered and allows the user to confirm that the information is correct. Below are all the input form fields and the validation required.
It is up to you (the designer) how you present the information request. For example in entering a date you can have a single text box, or you can have multiple boxes with drop down choices. You do, however, have to validate the data to make sure it meets all validation rules.
| Field | Validation |
| Name | The user must enter a first and last names. These cannot be blank. You may use a single text box, but must check for 2 names, or use 2 text boxes. |
| Address | The user must enter a valid mailing address that follows address rules. A city, state, and zip code must also be included as part of the address. You can use multiple text boxes – or a single one. You must still validate all elements. |
| Phone Number | A full 10 digit phone number must be entered (includes area code). Use an input mask to make the entry easy for the user. Read StackOverflow responses to creation of input masks using jQuery |
| Email Address | User must enter a correctly formatted email address name@domain.extension – |
| Birth Date | User must enter a valid birthday, make sure to check format and also date – if dates are unreasonable (like in the future) give a warning. |
| Message | The user will enter a free text message, you should have a multi-line text entry area for the message |
| Confirmation | A simple confirmation method to ensure that the fields are not filled out by a machine, you can use a captcha or simple security question (like what is the last name of the current president) |
Once the user enters all this information in the form and hits submit, you will present the information and allow the user to confirm that it is all correct. The user should not be able to enter invalid data or leave fields blank.
The form will be sent to your email address using the form action=”mailto:address” (you can get examples of this at http://www.javascript-coder.com/javascript-form/javascript-email-form.phtml ). This will also make it easy for me to test it – and you will be able to see the results of my testing once I start to grade it.
You will submit a link to your well designed and functional form. (Your form should incorporate good color choices and formatting to make it pleasant for the user to fill out).
Information
At https://cop4834.pbworks.com/w/page/66921998/Topic%20-%20Tools are some tools you may want to learn (for this and every class).
Estimated Completion Time
This assignment takes about 5-10 hours to complete and fully test your form. You must then upload the form and have it available on your web site. You should put a link in your menu (from assignment 3) to the form.
Supporting Lectures
The COP 4813 Lectures page has lectures to assist. I will also create lectures based upon question posted to the bulletin board for this assignment. You should go through each of the lectures on Javascript or be familiar with the basic JavaScript programming concepts. Specific lectures that will be useful for this assignment are;
Lecture – Form Validation in Javascript
Lecture – Debugging Form Validation in Javascript
Lecture – Basics – Functions and Form Validation
Also going through the tutorial on Javascript at w3schools ( http://www.w3schools.com/ ) is a must. This may also be a good place to start on jQuery – you will be using it later in the class and you will find that it is incredibly useful on day one.
Questions and Answers
External Resources
- JavaScript form validation has hundreds of resources at your disposal. You should first understand the concept of form validation, the tutorial at https://www.w3schools.com/js/js_validation.asp will help with that. From there a good understanding of the Form object (it is a tag) is important. You can master this by using the reference at –http://www.w3schools.com/jsref/dom_obj_form.asp . This is also a pretty good time to acquaint yourself to regular expressions if you have not done so already. In addition to my lectures on regex – the reference is here http://www.w3schools.com/jsref/jsref_obj_regexp.asp – but there are also hundreds of regular expressions examples out there.
- Another library of regular expressions – https://gist.github.com/nerdsrescueme/1237767
- Here is a great library of regular expressions – http://regexlib.com/Default.aspx
- A tool for helpful creation of forms is http://www.simfatic.com/
Grading Criteria
(5 points) Simply getting a working form up.
I will try to break your validation. For each validation I can break you lose one point. If my tests cannot get past your validation, you will get 10 points. I will try obvious things like leaving fields blank, entering bad dates, etc…