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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- doha academy qatar
- khan academy statistics
- khan academy significant figures chemistry
- khan academy order of operations
- khan academy numbers and operations
- khan academy number theory
- khan academy contact us
- khan academy contact number
- khan academy significant figures practice
- khan academy significant numbers
- american academy school doha
- academy of water education