HTML Forms and User Input Validation
Overview
Forms provide an interface for user input and interaction. They are found all over the internet.
"The <form> HTML element represents a document section containing interactive controls
for submitting information." - MDN
Prepare
- Read: 📃Form properties and methods - javascript.info
- Read: 📃Prevent Default and Form Events - wesbos.com
- Read: 📃Using built-in form validation - MDN
- Read: 📃Validating forms using JavaScript - MDN
Activity Instructions
- Navigate to this 📑Form example.
- Fork the CodePen into your own CodePen account.
- Modify the example by:
- Adding HTML form validation attributes to the form elements as you see fit, e.g., required.
- Adding a field requiring the user to enter the Principle amount again for verification.
- Use JavaScript validation to immediately check if the principle amounts match and notify the user and require the principle amounts to be entered again.
- Add or modify the code additional to ensure that NaN (Not a Number) output does NOT occur.
- Add CSS form element pseudo-classes valid and invalid to visually indicate that individual fields passed validation.