What is Pattern Attribute in HTML?

What is a Pattern Attribute in HTML?

As the name suggests, pattern means something that is arranged in a certain manner and sometimes repetitive in nature. The pattern can be in anything, such as any design, some expressions, or in some mathematical function. Similarly to that, we have pattern attributes in HTML. Let us now learn about the pattern attribute in HTML.

Basically, the pattern attribute in HTML describes certain regular expression, that needs to be matched with our given input values.

But what are regular expressions? Let us look below --

In general, a Regular Expression can be considered as some pattern or expression (either as strings, numbers, characters, etc.) that is used to describe any substring in a string. The regular expressions describe some search pattern in any string.

Example: Let us take an example to understand the pattern attribute in HTML better. Suppose, you have a "username" field in your web form. Let's say, you also want the username to follow certain criteria (or format).

So, you impose the following conditions for the username:

• Username should only consist of lowercase characters
• There should be no uppercase character or special character, or any number in the username.
• The maximum length of the username should not be more than 12.

In RegEx, we can express the following patterns in the below format:

RegEx for the username:

Let us see the complete code, and how will we include it in the pattern attribute.

Code

Output

So, the moment you input any username that does not follow the defined constraints, you will be immediately prompted with an error. This is how the validations (through regular expressions) work in the pattern attribute in HTML.

Let us jot down some important points regarding the pattern attribute in HTML:

• A regular expression is specified by the pattern attribute in HTML. And, we check the patterns of the input values against that regular expression specified.
• The pattern attribute is basically an attribute of email, password, text, search, url, date and tel input types.
• The pattern attribute works with the input elements.
• The input values passed by us, must be satisfying the patterns specified, otherwise they will fail the pattern matching.
• Pattern attributes on the <input> tags specify regular expressions. These regular expressions validate the data input (in forms generally) before submission.
• The data validation is done just before the submission of the forms.
• In case the value does not match with our regular expression defined in the pattern, the patternMismatch constraint validation error message and title appear in the error bubble on form submission

Now that we have enough background on the pattern attribute, let us look at its syntax.

Syntax

The syntax of the pattern attribute in HTML is given below :

In the pattern attribute in HTML, the input type can be anything of those mentioned below:

• text
• search
• password
• Email
• date
• url
• tel

After we mention the input type, there comes the pattern. In the pattern, we mention the regular expression against which we will compare the input type. In simple words, we validate the input using the regular expression given in the pattern.

What is Constraint Validation?

Earlier, form validations used to be a very difficult and complicated task for developers. The major issue they faced was while implementing a developer and user-friendly form validation on the client-side, also in a much more accessible way. This was mainly because, before HTML5 there was no way of implementing any kind of form validations natively, and so the developers were solely dependent upon JavaScript for the validations.

Hence, to solve the above-stated issues, HTML5 brought up a concept termed constraint validation. The very basic meaning of constraint validation is implementing some client-side validations on any kind of web form.

The constrain validation is basically an algorithm, which is run by the browsers whenever any form is submitted, to check the form's validity. For performing this constraint validation, that algorithm also makes use of various HTML attributes such as step, max, min, pattern, required, maxlength, type, etc.

Below given is the flowchart of a basic constraint validation, where suppose we have a phone number as input. And we have defined a pattern, which will validate against the entered input. If the input does not match the defined pattern, it will throw an error. Otherwise, it will submit the form.

Let us look at a very basic example of form validation below.

Example

In the above example, our form expects a phone number as the input. It has also set this field as required.

If we directly submit the above form without providing any value (or phone number), then we will be facing the below error based on the browser in which we are running.

Values

Values is the value taken by the pattern attribute in HTML is a regular expression (regexp).

For example, the value of the pattern attribute in HTML for validating an input type "password" can be something like the below --

The above regular expression in the value of pattern attribute says that the password must contain at least 8 characters, and in them, at least one of the characters must be a number, one uppercase character, and a lowercase character.

Complete code for the above pattern

If we pass some wrong format of password then we will face the below error :

Let us see another example for the value of a pattern attribute, where an input field must contain only 5 characters and no numbers or any special characters.

Code

If we pass a passcode that is less than 5 or more than five in the above input field, then we will be facing errors. For example,

Output

Examples

Now that we have learned sufficiently about the pattern attribute in HTML, let us look at some examples to further understand its working.

Example 1: An HTML Form with An Input Field that Can Contain only Three Letters

In this example, we will make an HTML form with an input field that can contain only three letters. We had seen a similar example above. Let us now try to code this.

The basic step we need to perform for this is, having a pattern attribute, whose value should be a regular expression that states, anything that contains only three letters. Let us first start by defining our pattern :

Pattern for an input field that contains only three letters:

The value of the above pattern is a regular expression. The regular expression states that our input can contain any lowercase or uppercase characters, that must not exceed 3.

Now, we will embed this pattern in our form. Let us see how,

Complete Code

Output

So, in the above code, we have defined a regular expression for our pattern. The regular expression states that our input can contain any lowercase or uppercase characters, that must not exceed 3.

In the input, the range (that is 3) is exceeded, so we got the error output.

Example 2: Matching a Phone number

Now in this example, we will define a pattern that matches a phone number.

The basic step we need to perform for this is, having a pattern attribute, whose value should be only numbers that must be up to 10 digits. Let us first start by defining our pattern :

Pattern attribute for the Phone number

Expected Phone number

So, our above pattern states that the phone number should contain the first 2 digits as the country code, the next input as the mobile number.

Let us look at the complete code for a better understanding:

Complete Code

Output

After entering some invalid phone number

Explanation From the above example, we can see that we are expected to enter the phone number into some specific format. The phone number must be within $(0-9)$ digits. Now, in our input, we violated by passing 4 digits to a place where 3 digits were expected. And, we were immediately prompted by an error. So, this is how we can write the pattern attribute for the phone numbers. Also, please note that we have specified the input type as "tel", depicting telephone number.

Example 3: Set the Pattern of Password type

In this example, we will learn how can we set the pattern of the type "password". There are various types of validations we can include when it comes to passwords.

Here, we will create a pattern that takes a password that is a minimum of 8 characters long and contains at least 1 digit, at least 1 uppercase character, and at least 1 lowercase character.

Before getting into our code, let us look into the pattern we will be using for doing the password validation --

So, the above pattern defines a regular expression, where 'd' specifies the digit, [a-z] specifies any lowercase character, and [A-Z] specifies any uppercase character, also we have given a length by using {8}. It specifies that the password length must be at least 8.

Let us now look at the complete code for the same.

Output

So, in the above example, we have written our code for the pattern matching of the password. If we provide any input which contradicts the rules we have specified in our pattern, then we will be immediately prompted by an error.

Why are pattern attributes not always sufficient for pattern validations?

Suppose you are building a web form where one of the input fields expects some credit card number. You may design a regular expression for matching credit card patterns, which suppose to match against visa and MasterCard. But do you think it is possible for you to sole-handily design regexp patterns that validate against all types of credit cards? Because, if we were to test our code for American Express cards or AmEx cards, etc., it would certainly fail because it was not designed for them.

So, as you start building complex applications, especially when you want your application to work across national borders, and different countries, it gradually becomes very difficult to just validate our inputs against some regexp patterns designed by us. Suppose, the License plates, price formats, phone numbers, dates, etc. drastically vary in different countries.

In those cases, it is not enough to just rely on our built patterns. For those cases we need a much stronger validation tool, that can validate against all sorts of inputs.

The pattern attribute using the regexp is not recommended for some fields like email, or dates, etc. They are already so common that HTML has already defined specific form input types for them. So, whenever you find HTML supports a feature or an input type, you must use that instead of just relying on your own built regexp patterns.]

Supported Browsers

The supported browsers for pattern attributes in HTML are given below.

Below given is the list of some major web browser that supports the pattern attribute in HTML:-

Below given is the list of some major mobile browser that supports the pattern attribute in HTML:-

Accessibility Concerns

When some forms have a pattern attribute, it is recommended that there should be a title attribute that explains or describes the pattern. If we only rely on the title attribute for the display of the text content then many users might not be able to see the attribute. Although some browsers show some tooltip whenever any element having a title has hovered, that is also limited to only the keyboard users. It is for this reason that you must provide instructions on how to fill in the form so that it matches the requirements.