JavaScript badge

Form Validation with JavaScript

JavaScript Course

Introduction

Forms are a crucial part of most websites. Almost every major site has sign-up forms, contact forms, search forms and more! Luckily HTML5 and JavaScript have some handy built-in methods. You’ve already learned about validation with HTML and styling validations with CSS in our Form Validations lesson in the Intermediate HTML and CSS course.

In this lesson, we’ll cover the Constraint Validation API: a way to validate forms on the frontend with JavaScript.

Learning Outcomes

By the end of this lesson, you should be able to do the following:

  • Understand the importance of validation in HTML forms.
  • Understand Constraint Validation API for more control over form validation.
  • Add validation using only JavaScript.

Assignment

  1. This tutorial on Form Validation covers how we can use JavaScript to validate forms, including the constraint validation API.

  2. It’ll also prove beneficial to go through the Constraint Validation docs.

  3. For Reference, this document covers the JavaScript validation API in a more concise format. These functions were explained in the previous article. Typically, with HTML forms, the inputs are validated upon form submission, but you can use these functions to check validity whenever you like (such as when a user clicks or tabs out of a specific input field).

Practice

Warmup

Go back to your ‘Library’ project and add simple 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.

Project

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.

The form doesn’t need to actually submit, but you should give an error message if the button is pushed with any active errors or unfilled required fields. For the sake of this lesson, make sure all of the validation occurs in the JavaScript file. If all is well and the form is “submitted”, give the user a high five.

  1. Set up a blank HTML document
  2. 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.
  3. Write the simple form elements.
  4. Add the JavaScript code that checks validation as the user progresses through the form. When a user leaves a form field, it should automatically validate that field.
  5. Test out all possible cases.
  6. Don’t forget to style validations with CSS by using the :valid and :invalid pseudo-classes!

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started
Thinkful Logo

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship