Menu
I have the following pattern attribute in form input:
pattern="^((https?:\/\/)?(www\.)?|(www\.))[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\/\S*)?$"
It should do very basic level client-side URL verification and accept the following user inputs: example.com, example-test.com, https://example.com, http://example.com but not examplecom or examplecom.
About a year ago it worked fine with Chrome (and other modern browsers) but now it's not working any longer and gives a console error:
Pattern attribute value ^(https?://)?(www.)?(\[a-zA-Z0-9-\]+\[.\])+\[a-zA-Z\]{2,}(/\\S*)?$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^(https?://)?(www.)?(\[a-zA-Z0-9-\]+\[.\])+\[a-zA-Z\]{2,}(/\\S)?$/v: Invalid character class\*\
I tried to change the pattern to make it work but I was only able to find a solution that accepts URLs without a hyphen (the pattern in the first input). It is weird that from some point Chrome started to struggle with character class syntax but the same code is working as expected with Firefox and Safari.
Does anyone know what causes the error with Chrome and how to get it to work like it does with Firefox?
Here is the code example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test pattern</title>
</head>
<body>
<form id="myForm" onsubmit="event.preventDefault();">
<label>URL without hyphen (eg example.com)
<br>
<input
pattern="^(https?:\/\/)?(www\.)?(\w+\.)+[a-zA-Z]{2,}(\/\S*)?$"
class="text-input"
required
type="text"
>
</label>
<br>
<label>URL with hyphen (eg example-dash.com)
<br>
<input
pattern="^((https?:\/\/)?(www\.)?|(www\.))[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\/\S*)?$"
class="text-input"
required
type="text"
>
</label>
<br>
<button type="submit">submit</button>
</form>
</body>
</html>
866
asked Mar 10 '26 03:03
I had the same problem and now it's resolved. The following characters no longer work in Chrome without escaping.
Some previously valid patterns are now errors, specifically those with a character class including either an unescaped special character or a double punctuator
pattern="[(]"
pattern="[)]"
pattern="[[]"
pattern="[{]"
pattern="[}]"
pattern="[/]"
pattern="[-]"
pattern="[|]"
pattern="[&&]"
pattern="[!!]"
pattern="[##]"
pattern="[$$]"
pattern="[%%]"
pattern="[**]"
pattern="[++]"
pattern="[,,]"
pattern="[..]"
pattern="[::]"
pattern="[;;]"
pattern="[<<]"
pattern="[==]"
pattern="[>>]"
pattern="[??]"
pattern="[@@]"
pattern="[``]"
pattern="[~~]"
pattern="[_^^]"
See below... https://github.com/whatwg/html/pull/7908
147
answered Mar 12 '26 00:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With