JavaScript Programming/Forms and Security

From Wikiversity
Jump to navigation Jump to search

This lesson introduces JavaScript form processing and security.

Objectives and Skills[edit]

Objectives and skills for this lesson include:[1]

  • Complete and debug code that retrieves input from forms and sets form field values
    • Retrieve form values; identify the DOM path; get values from different types of elements; prepopulate values; mask values
  • Describe the form submission process
    • onsubmit; post versus get; potential targets for submission
  • Implement exception handling
    • try; catch; finally

Readings[edit]

  1. Wikipedia: Form (HTML)
  2. Wikipedia: Data validation
  3. Wikipedia: Regular expression
  4. Wikibooks: JavaScript/Forms
  5. Wikipedia: Web application security
  6. Wikipedia: Exception handling

Multimedia[edit]

  1. YouTube: JavaScript Tutorial for Beginners - 43 - Form Validation Part 1
  2. YouTube: JavaScript Tutorial for Beginners - 44 - Form Validation Part 2
  3. YouTube: JavaScript Tutorial for Beginners - 45 - Form Validation Part 3
  4. YouTube: JavaScript Tutorial for Beginners - 46 - Form Validation Part 4
  5. YouTube: JavaScript Tutorial for Beginners - 47 - Form Validation Part 5
  6. YouTube: Writing Secure JavaScript
  7. YouTube: JavaScript Form Validation

Examples[edit]

Activities[edit]

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use document.getElementById().innerText or document.getElementById().innerHTML for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

  1. Create an HTML form that allows the user to enter their first name, last name, address, city, region, postal code, email address, phone number, and date of birth.
  2. Review W3Schools: HTML Form Attributes. Use form attributes wherever possible to improve data validity. Include required, min, max, minlength, maxlength, pattern, and/or type, where appropriate. Include a default value for region.
  3. Use JavaScript to validate data entry. Disable the Submit button by default, and only enable it when all data passes validation. Include appropriate error messages to inform the user of any necessary corrections. Help the user enter data matching appropriate patterns for phone number and date of birth based on your locale.
  4. Include two buttons, one labeled GET and the other labeled POST. Use JavaScript to change the form request method based on the button selected. Use https://postman-echo.com to echo submitted requests and compare the differences in data transmission format for the two types of requests.

Lesson Summary[edit]

  • Forms are an HTML element with some unique properties and events that allow programmers to inspect and control the form through JavaScript.[source?]

Key Terms[edit]

checkValidity()
This input element method returns true if the element contains valid data according to the rules you have specified in the input field.[2]
client-side form validation
An initial check that happens in the browser and helps ensure users fill out the form using correct data formats. Error messages are displayed if corrections are needed.[3]
reportValidity()
Runs the checkValidity method on the element's child controls. Those child elements which do not satisfy their validation constraints are reported to the user. [4]
server-side form validation
A validation that checks the data sent to the server and ensures that incorrect or malicious data is rejected.[3]
setCustomValidity()
This method sets the custom validity message for the selection element to the specified message. To reset the validity use an empty string as a parameter.[5]
validityState()
The ValidityState returns an object containing the errors detected via HTML constraint validation.[6]

See Also[edit]

References[edit]