JavaScript Programming/Forms and Security

From Wikiversity
Jump to navigation Jump to search
JavaScript Programming
  1. Introduction
  2. Variables and Expressions
  3. Functions
  4. Events
  5. Conditions
  6. While Loops
  7. For Loops
  8. Arrays
  9. Date and Time
  10. Objects
  11. DOM and BOM
  12. Dynamic HTML
  13. Forms and Security
  14. AJAX and JSON
  15. Libraries and Frameworks
  16. Node.js REST API
Download Learning Guide

This lesson introduces JavaScript form processing and security.

Objectives and Skills

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

  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

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

Examples

Activities

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 HTML elements 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

  • 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

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]
pattern
HTML <input> attribute that specifies a regular expression that the <input> element's value is checked against on form submission.[4]
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.[5]
required
HTML <input> attribute that when present, will specify that an input field must be filled out before submitting the form.[6]
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.[7]
validityState()
The ValidityState returns an object containing the errors detected via HTML constraint validation.[8]

See Also

References

  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ https://www.w3schools.com/js/js_validation_api.asp
  3. ↑ 3.0 3.1 MDNː Form data validation
  4. ↑ https://www.w3schools.com/tags/att_input_pattern.asp
  5. ↑ https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
  6. ↑ https://www.w3schools.com/tags/att_input_required.asp
  7. ↑ https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Forms_and_Security&oldid=2240502"