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.
input type=”text”>
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 pattern attribute is a nice way to add some client-side validation to forms without using JavaScript. But it should be noted that the pattern attribute does not validate against bad or malicious data. It will only warn users if their input does not match the pattern that you have defined. In order to be fully secure, all forms must include a sanitation and security check on the server side. To help with this, many web hosts offer free or paid tools for checking for bad data, such as spam or phishing attacks.
input type=”password”
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 boolean required attribute, the pattern attribute allows you to specify a regular expression against which the value of the input element is checked. This is a handy way of doing validation on the client side without resorting to Javascript. This feature is only supported in the input types email, search, url, tel, text and password. However, browsers that don’t support the pattern attribute will still validate input using JavaScript. This is a good idea to ensure that your form will work with any browser that will be used by your target audience.
input type=”search”
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
input type=”tel”
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
