Should I use ^ and $ in html5 input regex pattern validation?

Question

I've seen mostly examples without the ^ (circumflex) and $ (currency or dollar) characters to mark the beginning an end of the string being matched. However, I did not find anything regarding this in the html5 spec. Are they implicit in the pattern? The html5 spec states that they are implicit.

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string. 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).

In type="text" inputs, the pattern works fine using either format, however in type="tel" inputs, I had to remove the characters for the regex to work as expected. I've tested in both Opera and Firefox.

Is this a browser bug? Should I file a bug in bugzilla etc.?

---

Edit: It seems that I've stumbled uppon a weird bug, because I'm unable to create a reduced test case. A simple input in a page doesn't shows the behavior stated above. However, the question remains. Should I, or should I not use the darn ^ and $ anchors?

Answer 1

The HTML Standard's section on the pattern attribute still states that it is always anchored at the start and end, as already quoted in the question:

The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.

We can use a simple test snippet to confirm this behavior:

<form>
  <input required pattern="abc">
  <button>Submit</button>
</form>

You will notice that the form above rejects values of foo abc and abc foo; only typing exactly the string abc will be accepted. This demonstrates that pattern="abc" is equivalent to pattern="^abc$" and that you don't need to specify the ^ and $ explicitly.

As far as I can tell, the competing answer here claiming that browsers used to implement a different behavior, in violation of spec, is completely false. You can download Firefox 15 from https://ftp.mozilla.org/pub/firefox/releases/15.0/win32/en-GB/ and test out the snippet above in it yourself, and you'll see that the behavior is just like in a modern browser. Or, since you probably can't be bothered, you can check out this screenshot of me doing so for you:

Answer 2

According to the standard, the regex is anchored at the start and end. However, in practice (tested FF 15 and Chrome 21) it is anchored at the start only!

So if you want to be compatible both with the standard and reality, you should anchor your regex with a $ explicitly. Whether to use ^ also is up to you - it is not necessary.

Answer 3

Ofcourse you know phone numbers come in different forms,

e.g.

• while being in Vienna, Austria, dialing "4000" will connect you to the City Hall.
• while being in Innsbruck, Austria, you need to dial "014000" to dial the Vienna City Hall
• while being in New York, USA you need to dial +4314000 to dial the same number.

This has historical reasons, with the old mechanical system delegating the job of connecting the call from one device to the next with every digit (This is also the reason why extensions are at the end of a number, and not at the start, a.o.t the DNS where you can extend your domain names at the front, but not in the end)

Now a regex with both anchors ^ and $ will match a phone number only, if it is given in exactly the same form. With only the $ anchor it will reliably match the same phone number, as long as no different extension is given. No anchor, i.e. dropping ^ and $ will match independant of location codes and extensions, but will introduce unreliability:

Using "4000" as a pattern for the Vienna City Hall will match "4000", "014000" and "+4314000", but it will also match "+44140001" which is a German Bank.