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
- Wikipedia: Form (HTML)
- Wikipedia: Data validation
- Wikipedia: Regular expression
- Wikipedia: Web application security
- Wikipedia: Exception handling
- 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.
- 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.
- 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. 
- server-side form validation
- A validation that checks the data sent to the server and ensures that incorrect or malicious data is rejected.
- 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.
- The ValidityState returns an object containing the errors detected via HTML constraint validation.
- IT Security
- Wikipedia: Multi-factor authentication
- Mozilla: Sending and Retrieving Form Data
- Mozilla: Form Styling
- US-Cert.gov: CISA Security Alerts
- Mozilla: HTML attribute: Pattern
- MDNː Form data validation