Draft This page is not complete.
patternMismatchValidityState<input>pattern
If the field supports the pattern attribute -- which means the <input> is of type text, tel, email, url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternMismatch property will be true.
Examples
Given the following:
<p>
<label>Enter your phone number in the format (123)456-7890
(<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
<input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
<input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
</label>
</p>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, patternMismatch will be true. When true, the element matches the :invalid CSS pseudo-classes.
input:invalid {
border: red solid 3px;
}Note, in this case, we get a patternMismatch not a validityState.tooLong or validityState.tooShort if the values are too long or too short because it is the pattern that is dictating the length of the value. Had we used minlength and maxlength attributes instead, we may have seen validityState.tooLong or validityState.tooShort being true.
Note: The email input type requires, at minimum, a match of x@y and the url type requires, at minimum, a match to x:, with no pattern attribute present. When invalid, the validityState.typeMismatch will be true, if there is no pattern attribute (or if the pattern attribute is not valid for that input type).
Specifications
| Specification | Status | Comment |
| HTML Living StandardThe definition of 'ValidityState.patternMismatch' in that specification. | Living Standard | |
| HTML 5.1The definition of 'ValidityState.patternMismatch' in that specification. | Recommendation | |
| HTML5The definition of 'ValidityState.patternMismatch' in that specification. | Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "api.ValidityState.patternMismatch" (depth: 1) to the MDN compatibility data repository.
See also
ValidityState.patternMismatch by Mozilla Contributors is licensed under CC-BY-SA 2.5.
