LWC lightning input Regex pattern not working and showing errors in console

Question

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.

Answer 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