Objectives and Skills
- 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
- 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.
- HTML <input> attribute that specifies a regular expression that the <input> element's value is checked against on form submission.
- 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.
- 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.
- 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.
- MDNː Form data validation