Chapter 10 Programming Assignment

Typically when working with forms, you would be submitting them back to the server for processing. Since we are not doing any server side work in this course we will simply focus on doing things on button click as we have been so far.

In Chapter 10 we will be validating a simple registration form. The form expects 3 pieces of input, a name, phone number, and email address. I have created the html and css template for you to use, however in this assignment I have not provided anyJavaScript. You will be creating your entire JavaScript file from scratch. This part shouldn't be too much trouble for you at this point, especially since you have a few different chapters you can look at for reference now.

As far as validation, the name should be easy. We simply want to check that it's at least 6 characters long. We don't need to use any regular expressions or pattern checking for that. The phone number and email address however we do. Regular Expressions can be a little bit confusing to begin with, but they are simply a pattern that we are trying to match. For instance with a phone number we know that it must be 3 numbers, a hyphen, 3 more numbers, another hyphen, and then the last 4 digits. We could use a series of loops to check this, but that's inefficient and it's a lot more code for us. Regular Expressions (REGEX) makes this a lot easier for us once we figure out how they work because we can simply code that pattern, and then tell JavaScript to see if it matches.

Typically with email addresses, you will use the pattern something@something.something. While this can definately allow email addresses that are completely invalid, such as aaa@aaa.aaa, it at least matches the pattern which gives us a basis. Unfortunately, other than sending an email to the address and awaiting for a response or bounce, this is the best method available, and has become the industry standard.

There is also a a

beside each field that has had it's visibility set to hidden. It has been given a red color and a series of text. These are error messages for each field, and should be displayed for any field that isn't validated. For instance, if I typed 4536-32-1233 In the phone number field, txtPhoneError should be set to visible so the user can see the error message. They should also be set back to hidden everytime the submit button is clicked.

Chapter 10.css

body {

margin: 0;

}

.page {

margin: 10px auto;

height: 500px;

width: 500px;

background: #CCC;

}

.page table {

width: 500px;

height: 500px;

}

.error {

color: #FF0000;

font-weight: bold;

font-style: italic;

visibility: hidden;

}

Chapter 10.html

	Name must be at least 6 characters long.
	Phone must be in the format ###-###-####.
	Must be a valid email address.

Chapter 10.js

// COURSE: CIT 140 JavaScript

// NAME:

// DATE:

// PROJECT: Chapter 10 Programming Project

I have included what directions I have along with all the separate files for this program.

I am needing all the code for the Chapter 10.js file.