< JavaScript Programming
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
Multimedia
- YouTube: JavaScript Form Validation
- YouTube: JavaScript Tutorial for Beginners - 43 - Form Validation Part 1
- YouTube: JavaScript Tutorial for Beginners - 44 - Form Validation Part 2
- YouTube: JavaScript Tutorial for Beginners - 45 - Form Validation Part 3
- YouTube: JavaScript Tutorial for Beginners - 46 - Form Validation Part 4
- YouTube: JavaScript Tutorial for Beginners - 47 - Form Validation Part 5
- 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.
- 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.
- 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.
- 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.
- 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.
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
- ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
- ↑ https://www.w3schools.com/js/js_validation_api.asp
- 1 2 MDNː Form data validation
- ↑ https://www.w3schools.com/tags/att_input_pattern.asp
- ↑ https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
- ↑ https://www.w3schools.com/tags/att_input_required.asp
- ↑ https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
- ↑ https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.