JavaScript Programming/Forms and Security

This lesson introduces JavaScript form processing and security.

Objectives and Skills

Objectives and skills for this lesson include:

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

Multimedia

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

1. w.youtu

1. be.com/watch?v=30VeUWxZjS8

• W3Schools: JavaScript Forms
• W3Schools: HTML Form Attributes
• W3Schools: JavaScript Validation API
• W3Schools: Enctype in Form tag
• W3Schools: JavaScript RegExp Reference
• Example Code

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

checkValidity()

This input element method returns true if the element contains valid data according to the rules you have specified in the input field.

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.

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.

pattern

HTML <input> attribute that specifies a regular expression that the <input> element's value is checked against on form submission.

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.

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.

required

HTML <input> attribute that when present, will specify that an input field must be filled out before submitting the form.

Server-Side Form Validation

A validation that checks the data sent to the server and ensures that incorrect or malicious data is rejected.

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.

validityState()

The ValidityState returns an object containing the errors detected via HTML constraint validation.

See Also

• How To Create: JavaScript Security
• JavaScript Tutorial: Javascript Form Validation
• Medium: 11 things developers should know about GET vs POST
• MDN: Input Validation
• MDN: HTML attribute: Pattern
• MDN: Constraint Validation
• Smashing Magazine: Form Validation Best Practices
• JavaScript Info: Form Elements
• How to Build HTML Forms Right: User Experience

References

← Dynamic HTML

JavaScript Programming

AJAX and JSON →