← #123 Prevent browsers from asking to translate
#124

Validate an input value with the pattern attribute

Topics: HTML

Validating user input against specific rules is a common thing when we work with input fields. Without using an external validation library, we can use some built-in HTML 5 inputs to strict the value.

Specifically, the following input types force user to enter valid characters:

Input typeDescription
type="color"Only accepts a color
type="date"Only accepts a date
type="email"Only accepts a valid email address
type="number"Only accepts a number
type="tel"Only accepts a phone number
type="url"Only accepts a URL

Although these input types are useful, they can't serve the cases that the input must match a given regular expression.

For example, how we can force user to enter exactly 10 digits of a phone number when using the type="tel" attribute. That's where the pattern attribute comes in.

The sample code below solves the issue mentioned earlier:

<input
type="tel"
pattern="^\d{10}$"
title="Please enter 10 digits"
/>

It's recommended to use the title attribute, so users know what the correct value is.

Fix a typo or suggest an improvement
#125 Transform values from a JSON representation