Error causing problem in pattern validation for HTML inputs since version update

[g-battaglia-h-farm]

Error causing problem in pattern validation for HTML inputs, at least since version:
114.0.5735.133

In console is visible this errore:

Pattern attribute value ^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$/v: Invalid character in character class

I tested with old version of both Chrome and Chromium and the issue was not present in versione:
113.0.5672.92

The issue is also not present in Firefox and Firefox based browsers.

[dlaliberte]

Which field are you entering a value for, if any, such that this error results? Part of this pattern looks like an email address pattern, but I don't recognize the beginning as anything we are generating explicitly.

[jrobbins]

I can repro it in Chrome at this page:
https://cr-status-staging.appspot.com/guide/stage/5766413109690368/5/5709334269394944

[GuidoPX]

I have the same issue with a much simpler pattern: [-a-z0-9_]
The dash/hyphen causes the error and it doesn't matter if it is placed at start or at end of the expression.
I don't know since which chrome/webkit version this is the case. I am using 114.0.5735.134. Same issue in Edge 114.0.1823.51 but not in Firefox.

[Kovalchik8]

I have the same problem in Chrome with input patterns. Seems like a /v regex flag is using now by default and has a different syntax than before.

https://groups.google.com/a/chromium.org/g/blink-dev/c/gIyvMw0n2qw

[gustavoazo]

A regular expression is a powerfull tool for fast text pattern matching.
But they are also intractable, in my view. Or maybe I should just admit that despite my modest experience I never had the guts to dive deeper into regular expressions to become an expert. I'm not. And so I don't envy those people who actually develop these engines.
That being said, things get hairy when a error like the one reported in the OP is also hapenning with a regexp I'm using for url validation in a HTML form, using required attribute:

<input type="text"
name="xxx"
pattern="^(http(s){0,1}://.){0,1}[-a-zA-Z0-9@:%.+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%+.~#?&//=]*)$"
required />

Error is thrown when form is submitted (I assume the regexp pattern for that input field is "instantiated" and tested against the field's input value)

So my original pattern expression was:

pattern="^(http(s){0,1}:\/\/.){0,1}[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$"

Tried to use this expression in browser console. All pattern matching worked fine.
In one of these tests I tried to add the /v flag. The regexp instantiation throwed an error: "[...] /v: Invalid character in character class"

Replaced the original expresion by :

pattern="^(http(s){0,1}:\/\/.){0,1}[\-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([\-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)$"

I "just" escaped the "-" at the start of a character class : [-a-zA-Z0-9@:%._\+~#=] ► [\-a-zA-Z0-9@:%._\+~#=]
Problem is gone (after some short tests). Or maybe I "worked around" this incorrectly.

Reported error happens in (an)other browser. Not just Chrome.

BTW: I've never heard of this "-v" flag. Instantiating a regular expression in the browser's console throws the reported OP error. ("Invalid character in character class")
More about it : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets

Thank you.

[anhvancodon0105]

💗

[anhvancodon0105]

Những nội dung này OK 💗

[BigBoulard]

Just ran into the same issue. As @Kovalchik8 mentioned, the v option is now used to compile the pattern input attribute value since Chrome 112.

For my issue, I had to escape some special chars in character classes in conjunction with String.raw. Some useful doc here: whatwg/html#7908

For testing, you can try https://regex101.com/ and enable the v flag ( search vnicode in the regular expression input).

[jrobbins]

Our fix was deployed last month.