The Pattern Attribute in HTML5
The pattern attribute sets a regular expression that the value of an input element is checked against. It works with the text, password, search, url, tel, and email input types. Browsers may display a global title attribute with a description of the pattern to help users.
When the value of an input field does not match the specified regular expression, a patternMismatch constraint validation error message is displayed in the error bubble that appears upon form submission.
The pattern attribute allows you to define a regular expression that the value of an input element will be checked against. The attribute is compatible with the text, search, url, tel, and email input types. When a form is submitted, the input element’s value will be compared to the pattern and if there is a mismatch, an error message and global title will be displayed in an alert box.
The password input type creates a one-line plain text edit control for entering a password. The passwords entered are obscured so that they can’t be read by people other than the user and generally users won’t be able to copy the password to the clipboard. The password input type supports a number of attributes similar to those supported by the text input type. These include the required, multiple, maxlength and pattern attributes.
In addition to the standard text, date, search and password input types, HTML5 has introduced special input types for file, url, tel and email. These new types require the user to select a particular type of data and they come with their own special validation attributes that make it easy for form submissions to be validated against those particular formats.
These input types also have their own special pattern attribute that lets you specify a regular expression against which the value of the control should be checked. That pattern is checked on every submit. The title attribute allows you to provide a human-readable description of the pattern so users can easily understand what the expectations are.
The boolean attribute incremental is a WebKit and Blink extension (so supported by Safari) that, if specified, tells the user agent to send search events on the
While using the pattern attribute, it is important to remember that the value must match the entire regular expression for the form to be valid. Invalid values are reported as validation errors through the validator’s patternMismatch property.
While the pattern attribute can be used on any