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.
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).