HTML attribute: pattern
pattern attribute specifies a regular expression the form control's value should match. If a non-
null value doesn't conform to the constraints set by the
pattern value, the
ValidityState object's read-only
patternMismatch property will be true.
pattern attribute is an attribute of the text, tel, email, url, password, and search input types.
pattern attribute, when specified, is a regular expression which the input's
RegExp type, and as documented in our guide on regular expressions; the
'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.
If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.
Note: Use the
title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You must not rely on the tooltip alone for an explanation. See below for more information on usability.
Some of the input types supporting the pattern attribute, notably the email and url input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the
ValidityState object's read-only
typeMismatch property will be true.
When including a
pattern, provide a description of the pattern in visible text near the control. Additionally, include a
title attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.
If the input's value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the
patternMismatch property being
^(?: were implied at the start of the pattern and
)$ at the end.
Note: If the
pattern attribute is specified with no value, its value is implicitly the empty string. Thus, any non-empty input
value will result in constraint violation.
Matching a phone number
Given the following:
Enter your phone number in the format (123) - 456 - 7890 (<input
aria-label="3-digit area code"
size="2" />) -
Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the
pattern attribute set on each.
If the values are too long or too short, or contain characters that aren't digits, the
patternMismatch will be true. When
true, the element matches the
:invalid CSS pseudo-classes.
border: red solid 3px;
If we had used
maxlength attributes instead, we may have seen
validityState.tooShort being true.
Specifying a pattern
You can use the
pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).
The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.
<label for="uname">Choose a username: </label>
title="4 to 8 lowercase letters" />
<p>Usernames must be lowercase and 4-8 characters in length.</p>
This renders like so:
When a control has a
pattern attribute, the
title attribute, if used, must describe the pattern. Relying on the
title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements.
titles are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.
||Firefox for Android
||Safari on IOS