Saylor Academy



CS412

Interactive JavaScript Lab

Solutions

Exercise

Code for a form that renders similar to Figure 6 is shown in Figure 7 and can be found here.

[pic]

Figure 6

Henry's Pet Store Order Form

Name:

Address:

City:

State:

Choose a state

AK

AL

AR

AZ

CA

CO

CT

DC

DE

FL

GA

HI

IA

ID

IL

IN

KS

KY

LA

MA

MD

ME

MI

MN

MO

MS

MT

NC

ND

NE

NH

NJ

NM

NV

NY

OH

OK

OR

PA

RI

SC

SD

TN

TX

UT

VA

VT

WA

WI

WV

WY

AA

AE

AP

AS

FM

GU

MP

MH

PR

PW

VI

  Zip:

Telephone Number:

Dry Dog Food (Quantity)

Soft Dog Food Quantity

Cat Food Quantity

Figure 7

Write JavaScript code to validate this form according to the following rules:

1. Name must contain all letters.

2. City must contain all letters and the first letter must be capitalized.

3. A state must have been chosen.

4. Zip code must be either five digits, or five digits, a dash, and four digits.

5. Telephone number must be in the following format:

(999) 999-9999

You may want to check out a few regular expression sites for some hints.

6. All the quantities of food entered must be between 0 and 50.

Solution

The first part of the JavaScript code is shown below. The HTML file for the entire solution can be found here.

[pic]

You should be familiar with everything up to line 65 from the example that we worked on in this lab. Let’s look at the next batch of code:

[pic]

Lines 67–73 check to make sure that the telephone number was not left blank.

Line 75 is a regular expression to check the telephone number. Let’s take a look at this line in a bit more detail:

var regex = "^[/(][2-9][0-9]{2}[/)][\ ][2-9][0-9]{2}[-][0-9]{4}$";

The first part of the expression [/(] is checking for a left parenthesis. Notice how we have to use an escape character here so that the parenthesis is treated as a parenthesis and not part of the expression.

The second part [2-9] specifies that the first digit entered must be a number between 2 and 9. All area codes start with the numbers 2 through 9.

The next part [0-9]{2} specifies that two numbers between 0 and 9 must be entered.

[/)] specifies that the user must enter a right parenthesis.

[\ ] indicates that a space must be entered next.

[2-9][0-9]{2} specifies that the user must enter a number between 2 and 9 as well as two numbers between 0 and 9. This corresponds to the city code.

[-][0-9]{4} specifies that the user must enter a – and then four digits between 0 and 9.

Notice that there are no question marks in the expression. This indicates that all parts of the expression are required. Therefore, the user could not enter a telephone number without the area code or a telephone number without parentheses around the area code. All telephone numbers must be complete. For example, (978) 212-3454 would pass the validation but 212-3454 and 978 212-3454 would not,

Lines 77–83 use the regular expression to check the telephone number.

Lines 87–93 check to see if a non-numeric value was entered for the dry dog food field. The IsNaN function is used to check to see if the field contains non-numeric values.

Lines 95–103 check to see if the value of dry dog food is between 0 and 50. We use the parseInt function to convert the textbox (which is a string) to an integer.

This same code is repeated for soft dog food and cat food.

Let’s look at the final bit of code:

[pic]

Lines 129–135 check the quantity for cat food, the same as for dog food above.

Line 142 has one addition, which is just a call on the onSubmit method to the function.

You will notice when you examine the HTML file that I also changed the default value for dry dog food, soft dog food, and cat food to 0.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download