01 Oct Perform form validation Manipulate form fields
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.
