I have been using regex pattern for some Lightning input field in LWC and also provided 'message-when-pattern-mismatch' error message.

regex is like : pattern="[a-zA-Z-]+"

As per the pattern, input field will only accept alphabet in lowercase, uppercase and hyphen. But if I provide any special character or number then instead of showing error in the UI, its showing error in the console.

Again if I modify the regex like pattern="[a-zA-Z\-]+" Now it shows pattern mismatch error in the UI.

Does anyone have any idea why it's happening suddenly? Previously it was working fine.

  • 3
    Putting the hyphen at the end of a character class doesn't work with some regex engines. Either put it at the start or escape it. Are you running the LWC on a different browser to what you have used before?
    – Phil W
    Commented Jun 8, 2023 at 15:22
  • Also, you may need to double escape it: \\- Commented Jun 8, 2023 at 19:41
  • Hi @Phil, I haven't changed my browser. Can you check in your org by creating a simple component?
    – Sahid
    Commented Jun 9, 2023 at 6:43
  • Hi @Casper, It was working fine without escaping. But now it's not. I just need to know the reason. Solution, I already have.
    – Sahid
    Commented Jun 9, 2023 at 6:46
  • Which browser are you using? Could it be some updates in the browser itself?
    – Phil W
    Commented Jun 9, 2023 at 8:23

1 Answer 1


This is not an LWC-specific issue, but is caused by a change in the browser's pattern matching specifications.

There have been changes to the regular expression pattern matching options in Chromium.

This change has been incorporated in Chrome 114.

Since Edge is also Chromium-based, it is likely that similar issues may arise.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .