Wikiversity

JavaScript Programming/Forms and Security

< JavaScript Programming

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. Wikibooks: JavaScript/Forms
  4. Wikipedia: Web application security
  5. Wikipedia: Exception handling
  6. Input tag Definition and Usage

Multimedia

edit
  1. Youtube: The "submit" event on forms in JavaScript
  2. YouTube: JavaScript Form Validation
  3. YouTube: JavaScript Tutorial for Beginners - 43 - Form Validation Part 1
  4. YouTube: JavaScript Tutorial for Beginners - 44 - Form Validation Part 2
  5. YouTube: JavaScript Tutorial for Beginners - 45 - Form Validation Part 3
  6. YouTube: JavaScript Tutorial for Beginners - 46 - Form Validation Part 4
  7. YouTube: JavaScript Tutorial for Beginners - 47 - Form Validation Part 5
  8. YouTube: Learn Regular Expressions In 20 Minutes
  9. YouTube: Writing Secure JavaScript
  10. JavaScript Form Validation
  11. Youtube: Creating Contact Page with JS

Examples

edit
  1. w.youtu
  1. be.com/watch?v=30VeUWxZjS8

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

edit
  • Forms are an HTML element with some unique properties and events that allow programmers to inspect and control the form through JavaScript.[source?]
  • A web form, also called an HTML form, is an online page that allows for user input. It is an interactive page that mimics a paper document or form, where users fill out particular fields. Typically, a web form contains a combination of form elements such as a checkbox, submit button, text box, etc. For added interactivity, web designers may use elements or classes such as "input" along with "action" and "method" attributes. [https://www.techopedia.com/definition/25561/web-form]

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]
GET Method
Used to request data from a specified resource. The query string (name/value pairs) is sent in the URL of a GET request.[4]
pattern
HTML <input> attribute that specifies a regular expression that the <input> element's value is checked against on form submission.[5]
POST Method
Used to send data to a server to create/update a resource. The data sent to the server is stored in the request body of the HTTP request.[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.[6]
required
HTML <input> attribute that when present, will specify that an input field must be filled out before submitting the form.[7]
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.[8]
validityState()
The ValidityState returns an object containing the errors detected via HTML constraint validation.[9]

See Also

edit

References

edit
  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. ↑ 4.0 4.1 "HTTP Methods GET vs POST". www.w3schools.com. Retrieved 2023-04-22.
  5. ↑ https://www.w3schools.com/tags/att_input_pattern.asp
  6. ↑ https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
  7. ↑ https://www.w3schools.com/tags/att_input_required.asp
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
  9. ↑ 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=2588792"