New in HTML5.

Input Pattern: Use It To Add Basic Data Validation In HTML5

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Attribute of
How To Use Input To Create Form Fields In HTML: Easy Tutorial
What does Input Pattern: Use It To Add Basic Data Validation In HTML5 do?
Specifies a regular expression against which to validate the value of the input.

Code Example

<form>
 <label for="username">Username <i>(letters and numbers only, no  punctuation or special characters)</i></label><br>
 <input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>

Data Validation with Regular Expressions

The pattern attribute of the <input> element allows you to add basic data validation without resorting to JavaScript. It works by matching the input value against a regular expression. A regular expression is a formalized string of characters that define a pattern. For example [a-zA-Z0-9]+ is a pattern that matches against a string of any length, as long as the string contains only lowercase letters (a-z), uppercase letters (A-Z), or numerals (0-9).

  • Match [a-zA-Z0-9]+
    • htmlcodetutorial
    • Mississippi
    • 12BuckleMyShoe34
    • 8675309
  • Do not match [a-zA-Z0-9]+
    • https://html.com
    • Mrs. Ippi
    • 1, 2, Buckle My Shoe!
    • (321) 867-4309

Example Patterns

Username Patterns

Only letters (either case), numbers, and the underscore; no more than 15 characters.  [A-Za-z0-9_]{1,15} 
Only lowercase letters and numbers; at least 5 characters, but no limit.  [a-zd.]{5,} 
Only letters (either case), numbers, hyphens, underscores, and periods. (Not the slash character, that is being used to escape the period.) The username must start with a letter and must be between 1 and 20 characters long (inclusive).  [a-zA-Z][a-zA-Z0-9-_.]{1,20} 

Payment Info Patterns

USD Price Format (1.00)  d+(.d{2})? 
Credit Card Format - Digits only, between 13 and 16 digits long.  [0-9]{13,16} 

Also, check out this great list of HTML form regex patterns.

A note about pattern and common validation problems

There is an old proverb among computer programmers:

Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems.

Jamie Zawinski was talking about Perl when he said that back in 1997, but it holds true in other contexts as well. The most common problem you’ll run into with using the pattern attribute is poorly written (or poorly tested) regular expressions. They are a little hard and non-obvious. So the biggest problem is simply bugs — a regex that doesn’t actually test for what you want it to test for. But this can be fixed pretty easily with a question on StackExchange. The more difficult problem is testing for the wrong things. Consider the Credit Card pattern shown above as an example. If you used that in an actual payment field, it would match against MasterCard and Visa, but fail on American Express. Do you want your user to be able to pay you with their AmEx card? This sort of thing happens all the time, especially as you start to work across cultures and national borders: every country formats addresses differently, dates are formatted differently, phone numbers, and prices. License plate numbers vary by state within the US, and drastically differ by country. VIN numbers are different for different classes and types of vehicles, and also for years of production. You may want to validate against username styles in a third party system, but the third party system may change in the future, or may have changed in the past. You need to be very mindful of what type of input restrictions you are putting on your form fields. It may be the pattern is too blunt an instrument for your needs. You may need a more powerful and precise form validation tool.

Also, don’t regex for email addresses

HTML provides the email input type, which performs a validation check against email address patterns. It will work better than any regex you can find or come up.

Or dates

You could try to build a regex that checks for a date format

YYYY-MM-DD, only allows dates in the 20th and 21st centuries  (?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31)) 

But this can cause all sorts of problems. People like to format dates different (MM/DD/YY, DD MONTHNAME YYYY, etc.), and they probably won’t read your instructions on proper formatting the first few times they try it. Also, there is nothing to stop invalid dates like February 31, or dates too far in the future like 2099-12-31. On top of all that, you have to parse the string into a usable date object once you get it on the server. Instead of all that, just use the date input. Or datetime.

Or anything else you could with something else

Email addresses and dates are common enough that specific form input types already exist for them, so there is no need to use pattern. Any time you can use a specific feature of HTML, instead of resorting to building regular expressions, you should use it.

Front-end validation isn’t enough

HTML5 introduced a number of new form validation features, and pattern is just one of them. But you have to consider these as primarily helpful to the user, and remember that they do not provide any security against bad or malicious form inputs. It is trivially easy to bypass a front-end HTML form and simply submit faked form data directly to the server. This means that all of your form validation procedures — along with a sanitation and security check — will have to be repeated on the server, in order to avoid anything bad happening.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for pattern

iefirefoxchromeedgesafariopera
10434512934