-3

I'm trying to use the following regex to allow some basic feedback for users filling in a form:

/\+?[(]?(?:[0-9\ ][a-z]?[()\-\.]?){3,}/ig

(I'm aware of this point about regexes for phone numbers; my purpose here is just to allow some feedback for the user by highlighting the input box green or red, not to ensure real phone-numbers are entered).

This regex seems to behave exactly how I want on https://regex101.com/r/mpL6vv/1, but when I use it on the page, it seems to find everything invalid:

<input type='tel' name='phone' required pattern='/\+?[(?:]?([0-9a-z\ ][()\-\.]?){3,}/ig' />

This is being used as part of Zurb Foundation's Abide form validation. The page has many other inputs with various patterns, and they all seem to validate / invalidate correctly.

Could anyone suggest what I'm doing wrong that's causing the regex pattern to invalidate everything? Thanks.

trincot
  • 317,000
  • 35
  • 244
  • 286
glasstree
  • 257
  • 1
  • 4
  • 11

1 Answers1

0

You can't use javascript delimiters (or modifiers) in the html pattern object. For the pattern to work, remove the delimiter and javascript modifiers, like so:

\+?[(?:]?([0-9a-z\ ][()\-\.]?){3,}

See it in action here: http://jsfiddle.net/remus/dPZC7/ (press submit to check).

brandonscript
  • 68,675
  • 32
  • 163
  • 220