Invalid regular expression in HTML5 input pattern

Question

I need to use this regular expression in a HTML input (taken from Regular expression for a list of items separated by comma or by comma and a space):

[^,\s][^\,]*[^,\s]*

So I set it in an input:

<input type="text" class="form-control" id="input" name="input" data-ng-model="myModel" pattern="[^,\s][^\,]*[^,\s]*">

But I get this error in console:

Pattern attribute value [^,\s][^\,]*[^,\s]* is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[^,\s][^\,]*[^,\s]*/: Invalid escape

What is wrong with that regex?

I'm using Angular 1.5 BTW.

Invalid escape before ","

binariedMe
– binariedMe

2017-03-28 13:53:53 +00:00
Commented Mar 28, 2017 at 13:53 — binariedMe
– binariedMe, Commented Mar 28, 2017 at 13:53

Wiktor Stribiżew · Accepted Answer · 2017-03-28 14:10:17Z

3

You need to remove the escaping backslash from before the comma and use

 pattern="[^,\s][^,]*[^,\s]*"

It is necessary since FF and Chrome compile the pattern regex using the ES6 regex syntax specifications, and use the /u modifier when compiling the RegExp object. This lays certain restrictions on the pattern. In this case, a regular symbol, not a special metacharacter, a comma, was escaped inside a character class. Thus, removing the escape solves the issue.

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>
  <input type="text" class="form-control" id="input" name="input" data-ng-model="myModel" pattern="[^,\s][^,]*[^,\s]*">
</form>

edited Mar 28, 2017 at 14:10

answered Mar 28, 2017 at 13:54

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

Collectives™ on Stack Overflow

Invalid regular expression in HTML5 input pattern

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related