Introduction

Validations allow us to set specific constraints or rules that determine what data users can enter into an input. When a user enters data that breaks the rules, a message will appear, providing feedback on what was wrong with the entered data and how to fix it.

Validations are a vital ingredient in well-designed forms. They help protect our backend systems from receiving incorrect data, and they help make the experience of interacting with our form as dead-stupid-simple as possible for our users.

This lesson will explore some of the built-in validations you can use with HTML forms. We will also dive into styling validations with CSS.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• Explain what form validations are.
• Know how to use a few of the basic built-in HTML validations.
• Know how to build custom validations.

Required validation

We will often want to ensure specific fields have been filled in before submitting the form, for example, the email and password in a login form.

To make a field required, we add the required attribute to it:

See the Pen forms-required-validation by TheOdinProject (@TheOdinProjectExamples) on CodePen.

To ensure a good user experience and to meet accessibility guidelines, we should always indicate which fields are required. This will often be done by adding an asterisk(*) to the required field label like we have done in the example.

Text length validations

Sometimes we will want users to enter a minimum or a maximum amount of text into a field. Real-world examples of using these validations would be the old 140 character limit that X (formerly known as Twitter) used to have in its status field or having minimum and maximum length constraints on a username field.

Minimum length validation

To add the minimum length validation, we give the form control a minlength attribute with an integer value that represents the minimum number of characters we want to allow in the form control:

See the Pen forms-min-length-validation by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Try entering less than three characters into the text area and clicking the post button to see the validation in action.

Maximum length validation

To add a maximum length validation, we give the form control a maxlength attribute with an integer value which represents the maximum number of characters we want to allow in the form control:

See the Pen forms-maximum-length-validations by TheOdinProject (@TheOdinProjectExamples) on CodePen.

With the maximum length validation, the browser will prevent users from entering more characters than the max length attribute value. Try this for yourself in the example above.

Combining validations

HTML allows us to apply as many validations as we wish to a form control. For example, we can give our post textarea both minlength and maxlength validations:

See the Pen forms-combining-validations by TheOdinProject (@TheOdinProjectExamples) on CodePen.

This gives us much more scope to control what users input.

Number range validations

Just like we often need to control the length of text-based form controls, there will be many situations where we will want to control the range of values users can enter into number based form controls.

We can do this with the min and max attributes, which allows us to set the lower and upper bounds of the value entered into the form control. The min and max attributes only work with number-based form controls such as the number, dates and time inputs. You can view the complete list of supported elements on MDN’s documentation on the max attribute.

Some real-world use cases for using these validations would be limiting the quantity on a product order form or choosing the number of passengers on a flight booking form.

Min validation

To add a minimum value validation, we give the form control a min attribute with an integer value which represents the minimum number we want the form control to accept:

See the Pen forms-min-validation by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Try submitting the form with a quantity of 0 to see the validation in action.

Max validation

To add a maximum value validation, we give the form control a max attribute with an integer value which represents the maximum number we want the form control to accept:

See the Pen forms-max-validation by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Try submitting the form with seven passengers to see the validation in action.

Pattern validations

To ensure we get the correct information from users, we will often want to ensure data matches a particular pattern. Real-world applications would be checking if a credit card number or a zipcode is in the correct format.

To add a pattern validation, we give the form control a pattern attribute with a regular expression as the value. In our example we are using the pattern validation to ensure a US zip code is in the correct format (5 numbers followed by an optional dash and 4 more numbers):

See the Pen forms-pattern-basic-validation by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Entering an incorrect zip code and submitting the form will display the following validation error in the browser “Please match the requested format”. This isn’t very useful since it doesn’t communicate how to fix the issue.

It is good practice to use a placeholder attribute to show users an example of the expected pattern they need to enter:

See the Pen forms-pattern-with-placeholder-validation by TheOdinProject (@TheOdinProjectExamples) on CodePen.

The pattern attribute can only be used on <input> elements. Some input elements already validate data that matches a certain pattern. For example, the email input field will make sure a valid email is entered and the url input element will check to ensure the URL starts with http or https:

See the Pen forms-built-in-pattern-validations by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Styling validations

We can target form controls that have passed or failed validations using the :valid and :invalid pseudo-classes.

To see this in action, we will be using our email and website example that we looked at previously:

See the Pen forms-styling-validations by TheOdinProject (@TheOdinProjectExamples) on CodePen.

First of all, we target any valid inputs and give them a green border. Our email and URL inputs initially have a green border since they are not required fields and are valid.

When a field is invalid, we give it a red border instead. Try entering an invalid email address and URL to see how this looks.

Conclusion

The built-in validations will take you far with ensuring your users enter the correct data. They are quick and easy to add. However, they have their limitations.

Sometimes you will need to include validations that the built-in validations won’t be able to do. For example, validating that a password input and password confirmation input have the same value or validating that a username has not already been taken. We are also limited with what we can do with styling the validation messages and the content within them.

In this case, we will need to get creative and make custom validations using JavaScript and CSS. We’ll dive into how to achieve validation via JavaScript in a future lesson.

It’s also worth noting client-side validations are not a silver bullet for ensuring users enter the correct data. To ensure the integrity of any user data coming into our systems, we should also have server-side validations in place. We will cover this side of validations later in the curriculum.

Assignment

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

• What does the required validation do?
• What validations can you use for checking text length?
• How can you validate the minimum and maximum of numeric inputs?
• What can you use the pattern validation for?
• What pseudo CSS selectors are available for styling valid and invalid inputs?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• Look through this X thread of the do’s and don’ts for form validation UX.
• Check out these 10 Guidelines for form validation design.
• Learn Regex: A Beginner’s Guide is a great resource for understanding how regex patterns are built and shows how to use a fantastic tool for creating them.
• Demystifying Regex with Practical Examples contains some practical examples in detail so you can understand how they work rather than copying and pasting.
• One last resource on regular expressions that can be helpful is MDN’s regular expression syntax cheatsheet. This cheatsheet does a great job explaining the syntax of regular expressions in more detail.