0

I have been using regex pattern with 'message-when-pattern-mismatch' error message for some lightning input fields in LWC component.

regex1 is like : pattern="^[A-Za-z-.' ]*" [it should allow only alphabets(lowercase/uppercase) and the following special characters (-), (.) and (‘).]

regex2 is like : pattern="^(?(\d{3}))?[ .-]?(\d{3})[ .-]?(\d{4})( ?(ext.? ?|x)(\d*))?$" [phone field with format (111) 111-1111 and should allow 10 digits only]

The Problem is, instead of showing error message in the UI, its showing pattern error in the console. following are the pattern errors,

regex1 pattern error: Pattern attribute value ^[A-Za-z-.' ]* is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[A-Za-z-.' ]*/v: Invalid character class

regex2 pattern error: Pattern attribute value ^(?(\d{3}))?[ .-]?(\d{3})[ .-]?(\d{4})( ?(ext.? ?|x)(\d*))?$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^(?(\d{3}))?[ .-]?(\d{3})[ .-]?(\d{4})( ?(ext.? ?|x)(\d*))?$/v: Invalid character in character class

Does anyone have any idea why it's not working? What needs to be update in these patterns? Thanks.

Improve this question
4
  • 2
    Move the '-' representing hyphen to the start or end of the character choices. Right now it is being treated as a range specifier, which is breaking it. Commented Dec 16, 2023 at 17:13
  • 1
    Yes, hyphen is a problem, but I think for both cases a backslash in front of all '-' representing hyphens is better. I don't get why you don't escape the brackets that are meant to represent themselves in the second expression - try '\' there too, start with something like ^\(?(\d{3})\)?... Commented Dec 16, 2023 at 18:03
  • @PhilW is totally right. regex1 should be "^[A-Za-z\-.' ]*" and regex2 should be "^(?(\d{3}))?[ .\-]?(\d{3})[ .\-]?(\d{4})( ?(ext.? ?|x)(\d*))?$" . Any time you are not doing a range specifier (ie a-z) and trying to use the regex to allow a dash to be present it needs to be escaped in an lwc pattern. At least it worked for me. Commented Oct 21 at 13:25
  • You can avoid trying to escape the "-" by simply making it the first or last character in the character choices. So e.g. [-A-Za-z.'] would work nicely. Commented Oct 21 at 13:39

1 Answer 1

Reset to default
-1

whatever you provided patterns are not support in LWC that's why it was throwing console errors. I modified patterns like below

Old Pattern : ^[A-Za-z-.' ]*

New Pattern : ^[A-Za-z\-.']

old Pattern : ^(?(\d{3}))?[ .-]?(\d{3})[ .-]?(\d{4})( ?(ext.? ?|x)(\d*))?$

New Pattern : (\([0-9]{3})\)+[\-.]+([0-9]{3})+[\-.]+([0-9]{4})

Try these new patterns it will work for you

Improve this answer
2
  • This sounds incorrect to me, and doesn't agree with the comments by established users. Getting rid of the kleene star means your first suggestion would only match a single character. If you can point to official documentation to support your answer, you should. Otherwise, this is not an answer people should use. Commented Dec 18, 2023 at 15:32
  • @DerekF I tested these two regex patterns It was working for me. I just given solution for this use case only. I don't have official support document for this one. Commented Dec 19, 2023 at 4:13

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.