Guide: Javascript In The Browser - Forms
Description
👉 This guide is part of the Javascript In The Browser Guides.
- DOM Manipulation & Timing
- Forms
- Common Web APIs
Using forms to manipulate data is a key concept in today's web applications. In this Guide you will learn and exercise that ability.
Knowledge
- Understand the importance of validating forms
Skills
- Be able to create a form that gets processed by Javascript when submitted
- Be able to create proper validation for forms and display the errors to the user
Topics
- Submit event listener
- Validation (native & custom)
Action Points
- Read up on form validation with Javascript
- Sandbox data manipulation with forms using Glitch or similar
Deliverable: Form
- Submit:
- Glitch Project URL or Github Repository + Github Pages URLs
- Add comments for each relevant code block
- Project description and details in the README.md file
- Glitch Project URL or Github Repository + Github Pages URLs
- Minimum requirements
- A form that has at least 4 types of data (short text, long text, email, number, boolean, image, etc)
- Make all fields required for a HTML5 validation
- Hijack the submit event and create a custom validation which displays error messages next to the fields that contain errors
- Show a success screen upon submission without errors
- Theme ideas:
- Contact form
- Registration form
- Quiz game form