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: