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:
|Only accepts a color|
|Only accepts a date|
|Only accepts a valid email address|
|Only accepts a number|
|Only accepts a phone number|
|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:
title="Please enter 10 digits"
It's recommended to use the
title attribute, so users know what the correct value is.