Validate an input value with the pattern attribute
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 type | Description |
|---|
`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.