I inject some Regex string to input element's pattern attribute via javascript (depending on some form changes out of context) and it works as expected but the thing is, it logs an error to the console when I focus on the input for the very first time.

I've tried to escape the regex as you can see below but then HTML input failed to validate the corresponding value according to the pattern used before.

required regex code

(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))

and that's how i define and inject it via JS

/([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+)/g

and here's what I tried and failed while trying to escape it for HTML pattern attribute

([\d \-)–+/(]+){6,}\)?([.-–/]?)([\d]+)

I'm really seeking a way to achieve all these without any errors:

• regex will be used in JS to match with the input value and only proceed if it's valid
• it will also be used in HTML as a pattern attribute to give user feedback about input validation hopefully without any errors like this one; Pattern attribute value /(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: //(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g/: Invalid escape

I inject some Regex string to input element's pattern attribute via javascript (depending on some form changes out of context) and it works as expected but the thing is, it logs an error to the console when I focus on the input for the very first time.

I've tried to escape the regex as you can see below but then HTML input failed to validate the corresponding value according to the pattern used before.

required regex code

(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))

and that's how i define and inject it via JS

/([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+)/g

and here's what I tried and failed while trying to escape it for HTML pattern attribute

([\d \-)–+/(]+){6,}\)?([.-–/]?)([\d]+)

I'm really seeking a way to achieve all these without any errors:

• regex will be used in JS to match with the input value and only proceed if it's valid
• it will also be used in HTML as a pattern attribute to give user feedback about input validation hopefully without any errors like this one; Pattern attribute value /(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: //(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g/: Invalid escape

• javascript
• html
• regex
• validation
• input

• Before any escaping, your ([\d \-\)\–\+\/\(]+){6,} makes no sense. You match one or more chars in the char class 6 or more times. What should the pattern match? – Wiktor Stribiżew Commented Oct 23, 2019 at 9:06
• To validate a string, you will need to use ^your_pattern$, add anchors. – Wiktor Stribiżew Commented Oct 23, 2019 at 9:07
• Thnx for the response @WiktorStribiżew Pattern should match exactly the regex (which addresses the german phone numbers like these regex101./r/CAVex8/143 ) I'm happy with regex but my input pattern attribute is not :s – Emre Çamaşuvi Commented Oct 23, 2019 at 9:23
• You need /^\(?[\d +\/()–-]{6,}\)?[ .\/–-]?\d+$/ in String#match and pattern="\(?[\d +\/()–-]{6,}\)?[ .\/–-]?\d+" – Wiktor Stribiżew Commented Oct 23, 2019 at 9:23
• Why is that? It resolves my needs. I'd love to hear your remendation that will work well with the pattern attribute. – Emre Çamaşuvi Commented Oct 23, 2019 at 9:25

1 Answer 1

The regex itself is not really validating the phone numbers well, but since you are happy with the pattern, see below how it should be used in JS and HTML5 pattern attribute.

In JS, you need to use

var rx = /^\(?[\d +\/()–-]{6,}\)?[ .\/–-]?\d+$/;
// Test
console.log(rx.test("02162 - 54 91 44 79"));

In a HTML5 pattern attribute, the anchors are redundant and the escaped chars should only be those that are allowed be escaped (i.e. [\(\)] -> [()], etc.):

input:valid {
  color: black;
  border: 5px solid #dadadada;
  border-radius: 7px;
}
input:invalid {
  color: navy;
  outline: none;
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;
}

<form name="form1"> 
 <input pattern="\(?[\d +\/()–-]{6,}\)?[ .\/–-]?\d+" title="Please enter a valid phone number!" value="(02162) 54 91 44 79" />
 <input type="Submit"/> 
</form>