JS Lab 20 - Form Validation

Learning Outcomes

• Demonstrate the JavaScript rules for referencing forms and form elements.
• Demonstrate the JavaScript rules for referencing the properties and values of each type of form element.
• Demonstrate the use of form event handlers, methods, and properties to validate a form.
• Demonstrate the correct use and syntax of the following form event handlers:
  • onsubmit onreset onfocus onblur onchange
• Demonstrate the correct use and syntax of the following form event methods:
  • submit() reset()
• Demonstrate the correct use and syntax of the following form properties:
  • length selectedIndex checked
• Demonstrate how to send to e-mail a form's data.
• Demonstrate the use of hidden fields in a form.

Lab Files

• 01_validation.htm
• 02_validation.htm
• 02_validation.js

Lab 1

• Right-click the link below, select the Save Target As command, and then save the file with the 01_validation.htm filename to the Form Validation Lab directory. Note: Be sure to change the filename. 01_validation_data_file.htm
• General page requirements for the document: 01_validation.htm
  • Your document must pass W3C Validation.
  • Use the XHTML 1.1 DTD.
  • Insert two meta elements to identify the author (you) and document description.
  • Place your name in the page title followed by Validation-1. For example, Sally Student - Validation-1
  • Insert at least 2 JavaScript comments in the document to describe the code.
• Form specifications:
  • Add an event handler to the form element that calls a function named: confirmSubmit. The user triggers this event handler when he/she clicks the form's Submit button.
  • The confirmSubmit function asks the user to confirm whether he/she wants to submit the form as you see in Figure 1A below.
  • When the user clicks the OK button, the browser does submit the form. When the user clicks the Cancel button, the browser does not submit the form.
  • Add an event handler to the
    element that calls a function named: confirmReset. The user triggers this event handler when he/she clicks the form's Reset button.

• Test both responses for each button.

Lab 2

• Right-click the link below, select the Save Target As command, and then save the file with the 02_validation.htm filename to the Form Validation Lab directory. Note: Be sure to change the filename. 02_validation_data_file.htm
• General page requirements for the document: 02_validation.htm
  • Your document must pass W3C Validation.
  • Use the XHTML 1.1 DTD.
  • Insert two meta elements to identify the author (you) and document description.
  • Place your name in the page title followed by Validation-2. For example, Sally Student - Validation-2
  • Insert at least 2 JavaScript comments in the document to describe the code.
• Create a JavaScript program to verify that customers fill out the required information.
  • When the user clicks the Submit Order button, an event handler in the form tag calls a function, confirmInfo, that checks to verify the user has completed the following information: First Name Last Name Address City State Zip Phone Card Number Expiration Month Expiration Year
  • If the user does not complete some information in a listed field, then the program displays an alert dialog box telling the user that he/she must fill in the related field as you see in Figure 2A below. Notes: Display an alert dialog box requesting the first missing data. Return focus to the missing data field. Keep doing this until all fields are completed. Notice the beginning value in the credit card fields.
  • When the user does fill in all the required fields, then the program displays an alert dialog box telling the user that his/her order has been confirmed as you see in Figure 2B below.
  • Place the script in an external source file - 02_validation.js
• Test the program code.