Regex | Pattern attribute value is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression

Question

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

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
– 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
– 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.com/r/CAVex8/143 ) I'm happy with regex but my input pattern attribute is not :s — Emre Çamaşuvi
– 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
– Wiktor Stribiżew, Commented Oct 23, 2019 at 9:23
Why is that? It resolves my needs. I'd love to hear your recommendation that will work well with the pattern attribute. — Emre Çamaşuvi
– Emre Çamaşuvi, Commented Oct 23, 2019 at 9:25

Wiktor Stribiżew · Accepted Answer · 2019-10-23 09:57:53Z

3

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>

answered Oct 23, 2019 at 9:57

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Emre Çamaşuvi Over a year ago

Thank you for your time. I'll accept your answer but I really wonder what's the problem with my form since I still get this error in console

Pattern attribute value (?[d +/()–-]{6,})?[ ./–-]?d+ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /(?[d +/()–-]{6,})?[ ./–-]?d+/: Invalid group

correspoding html and JS code is in here: jsfiddle.net/0td6xrug/2

Wiktor Stribiżew Over a year ago

There, you need pattern="\s*[A-Za-z]+(?:(?:[.,]? |[-'])[A-Za-z]+)+\.?\s*" for name. The phonePattern = new RegExp(/^$?[\d +\/()–-]{6,}$?[ .\/–-]?\d+$/); must be declared as const phonePattern = /^$?[\d +\/()–-]{6,}$?[ .\/–-]?\d+$/;. And let resolution = inputValue && !!inputValue.match(this.phonePattern); must be let resolution = inputValue && this.phonePattern.test(inputValue);, but the main trouble is inputEl.setAttribute('pattern', (?[\d +\/()–-]{6,})?[ .\/–-]?\d+);, it must be inputEl.setAttribute('pattern', "\$?[\\d +/()–-]{6,}\$?[ ./–-]?\\d+");.

Wiktor Stribiżew Over a year ago

See this JS fiddle

Emre Çamaşuvi Over a year ago

Thank you! That pattern worked like a charm now. Since you've got pretty good regex knowledge, can I ask you why we have to change the regex string for pattern? What's the motivation behind it, any links articles are welcome. Once again, thank you very much Wiktor!

Wiktor Stribiżew Over a year ago

Ask me a quesion one by one, probably in chat. There are too many things here. Actually, I do not get it what you mean by why we have to change the regex string for pattern. I changed to ^$?[\d +\/()–-]{6,}$?[ .\/–-]?\d+$ because hyphens at the end of the character classes does not have to be escaped, (a+){6,} makes no sense, anchors are necessary to make the regex be applied to the whole string.

Collectives™ on Stack Overflow

Regex | Pattern attribute value is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related