1

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.

6
  • 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? 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? 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. Commented Jun 9, 2023 at 6:46
  • Which browser are you using? Could it be some updates in the browser itself? Commented Jun 9, 2023 at 8:23

2 Answers 2

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.
https://chromium-review.googlesource.com/c/v8/v8/+/4212393

This change has been incorporated in Chrome 114.
https://chromestatus.com/feature/5149507107422208

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

0

Try to use \x2d instead.

Regexp will be:

pattern="[a-zA-Z\x2d]+"
0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.