This section contains a general overview of topics that you will learn in this lesson.
- Understand the importance of validation in HTML forms.
- Understand Constraint Validation API for more control over form validation.
It’ll also prove beneficial to go through the Constraint Validation docs.
Go back to your ‘Library’ project and add validation to that form! Don’t let your users submit without filling in all the fields! Don’t forget to use your Git workflow skills you learned in this foundations lesson to make a new branch, work on your feature and merge it back to main when it’s all done.
Build a browser form which collects Email, Country, Zip Code, Password and Password Confirmation fields. It should use live inline validation to inform the user whether a field is properly filled in or not. That means highlighting a field red and providing a helpful error message until it has been filled in properly.
- Set up a blank HTML document
- Think about how you would set up the different form elements and their accompanying validators. What objects and functions will you need? A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.
- Write the form elements.
- Test out all possible cases.
- Don’t forget to style validations with CSS by using the
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
- Explain the importance of validating HTML forms before submitting them to a server.
- Describe the two types of client-side form validation.
- Could forms also be validated without using Constraint Validation API?
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- It looks like this lesson doesn’t have any additional resources yet. Help us expand this section by contributing to our curriculum.