Input type="tel" pattern stopped working after Chrome 114

Asked Jun 09 '23 at 14:56

Active Jun 09 '23 at 14:56

Viewed 27 times

I have a HTML form with a telephone input. I have created a regex pattern that I believe suit my needs.

<input type="tel" pattern="(\+\d{2})?[-. ]?[0-9]{3}?[-. ]?([0-9]{3})[-. ]?([0-9]{4})"/>

The pattern is correct, according to my understanding.

However, if you test it with an erroneous value like qqqqq, the field validation succeeds and the form is posted, since Chrome version 114. With Chrome versions up to 113, the validation failed saying, Please match the requested format. If you switch the pattern to something simpler like [0-9]{10}, the validation works normally.

Am I missing something, or is this a bug in Chrome?

1: https://regex101.com/r/WWKtna/1

asked Jun 09 '23 at 14:56

mavrosxristoforos

3,573
2
25
40

1

In short: you need to escape the literal `-` inside the character classes since the `input` pattern regex is now compiled with the `v` flag. – Wiktor Stribiżew Jun 09 '23 at 14:58
Thank you @WiktorStribiżew. Will that work for versions earlier than 113, too? – mavrosxristoforos Jun 09 '23 at 15:01
Yes, escaping a literal hyphen inside character classes works the same across all JS patterns. – Wiktor Stribiżew Jun 09 '23 at 15:28
That's great. Thanks. – mavrosxristoforos Jun 10 '23 at 16:28

Input type="tel" pattern stopped working after Chrome 114

0 Answers0