| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

COP4813 Assignment 3 - Form Validation with Javascript

Page history last edited by Dr. Ron Eaglin 3 years ago

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 http://www.w3schools.com/js/js_form_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.

 

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...

 

COP4813 Assignments

Comments (0)

You don't have permission to comment on this page.