-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 reFiddle ( http://refiddle.com/h0x ), 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.

Community
  • 1
  • 1
glasstree
  • 257
  • 1
  • 3
  • 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
  • 62,971
  • 29
  • 152
  • 211