pattern
A pattern (regular expression) the field value must match.
Syntax
<input pattern="[0-9]{5}" title="5 digits">Parameters
| Parameter | Type | Description |
|---|---|---|
| pattern | regular expression | A regular expression the whole value must match. |
Examples
A five-digit ZIP code — type letters and press the button:
<form>
<label>ZIP code
<input name="zip" pattern="[0-9]{5}" title="Five digits, e.g. 10115" required>
</label>
<button>Check</button>
</form>Length without a regular expression:
<form>
<input name="nick" minlength="3" maxlength="12" placeholder="3–12 characters" required>
<button>Save</button>
</form>Notes
The pattern checks the whole value — you do not need ^ and $. The browser adds the title text to the error message, so describe the format there. An empty field is not checked by pattern — add required if the field is mandatory.
See also
Related recipes
In the tutorial
- Form validation — Built-in field validation in the browser — required, minlength and maxlength, min and max, pattern, styling errors and novalidate.