HTML5 Input Patterns and Invalid Regex

This post is more than 2 years old.

This is just a quick note to discuss something interesting a reader and I encountered last week. As you know (hopefully!), the input tag supports a pattern argument. The value of the pattern argument is a regular expression that is compared against the value of the input field. This allows for custom types of validation for data not covered by the host of new field types added in HTML5.

But here's an interesting question. What exactly happens when you supply a bad regular expression? As you might expect - absolutely nothing. A reader on my blog noticed that a pattern value he had used was letting everything pass and not validating as he expected. When this happens, nothing will show up in the console and you really don't have a good idea as to what is going on.

Luckily there is a way to check for this. First - note that the Mozilla Dev Network docs on Input say this about pattern:"The regular expression language is the same as JavaScript's." This is probably obvious, but when it comes to browsers, I try not to assume anything. But armed with this knowledge you have a simple way to double check your patterns before using them in an input field.

I opened up my console, took his regex, and simply put it in a new RegExp object. The second I pasted in his bad regex, I got an error. Here is an example:

Something to keep in mind, folks!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Randy Edmunds posted on 1/13/2014 at 10:13 PM

Brackets has an Inline Regex Editor extension that can also help with this.

Comment 2 by Raymond Camden posted on 1/13/2014 at 10:28 PM

An update: In Firefox, as soon as you type into the field, you get this:

SyntaxError: invalid range in character class

in the console. It isn't terribly obvious to me, but, it is *something* at least. I double checked Chrome - no message. I also checked Safari, but apparently Safari isn't working with validation at all. CanIUse says ( that it should do something on blur (my reading of the note) but I couldn't see any validation.

Comment 3 by Raymond Camden posted on 1/13/2014 at 10:32 PM

Randy: I just tried Peter's extension - that's pretty darn slick.

Comment 4 by Mathias Bynens posted on 1/14/2014 at 2:42 AM

The spec says the following about the `pattern` attribute:

Note: This implies that the regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a `^(?:` at the start of the pattern and a `)$` at the end).

So, to properly test the regular expression in JavaScript before using it as a `pattern` attribute value, prepend `^(?:` and append `)$` to the regex.

Comment 5 by Raymond Camden posted on 1/14/2014 at 3:54 AM

Good reminder there, Mathias, thank you.