Lab 10
Attached Files:
lab10.zip (2.749 KB)
Objectives:
Perform form validation
Manipulate form fields
Requirements:
Download orderform.html for this lesson.
Add a link to the jQuery library and the external JavaScript file to the html page.
Put the cursor in the username field
Add validation to the form fields whenever the user moves off the form field as follows:
Name required non-blank
Email required, valid email address (use regex)
Address & City, Shipping Address & city required non-blank
Zip code, Shipping zip code required, numeric, 5 characters
If an error is found, display an appropriate error message in the associated span error tag beside the field.
If no error is found, set the text of the error field to nothing (to remove any previously displayed error messages).
When the user changes the Copy address checkbox:
If the checkbox is checked, copy the billing address, city and zip to the corresponding shipping fields
Add an entry to the state dropdown list as selected with the state from the billing state dropdown list.
When the user moves off of a quantity control (class =”qty”):
Initialize an ordertotal to 0
For each quantity:
get the quantity value entered. If it is not numeric, change it to 0
get id to use to identify the associated price and total
get the price text by using the id “price” + the index value
multiply price times quantity to get a total
Put the total in the table cell with id “total”+index
Add the total to the ordertotal
Place the order total in the subtotal cell.
If ship state is “TX”, calculate tax of .08 times the total and put in the tax cell. Use 0 for all other states.
Add tax to ordertotal.
Calculate shipping based on the shipping state and place it in the shipping cell.:
“TX”: $5.00
“CA” & “NY”: $20
all others: $10
Add shipping to the ordertotal
Display the ordertotal in the Grand Total cell.
When the form is submitted, revalidate all the fields. If the data is not valid, cancel submission of the form.
Test and upload your files to the server
Lab Requirement
Point Value
Cursor placed in username field
5 points
Validation for required fields works (name, email, address & city) and error messages displayed
5 points
Email validated with regex and error message displays
10 points
Zip codes validated as number and 5 characters
5 points
Copy address box when checked copies the text fields from the billing to the shipping fields
10 points
State dropdown box shows correct state then billing data copied.
5 points
Quantity field triggers calculations and subtotals are calculated and displayed correctly
10 points
Tax and shipping are calculated correctly based on state and added to order total.
10 points
All fields are validated on form submission and form submission canceled if invalid.
10 points
Page displays and script executes according to lab specifications on the server
5 points
Total:
75 points
“Place your order now for a similar assignment and have exceptional work written by our team of experts, guaranteeing you A results.”
Attachments
20190419142604lab10 (3 kB)
