0

I'm trying to get this RegExp of a UK phone number to work in an HTML pattern attribute, I can do basic RegExp, but this is beyond me.

So the pattern is (from; Regular expression for UK based and only numeric phone number in cakephp)

^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$

and works fine in the console and returns the expected results. The pattern in the INPUT attribute matches exactly to the above so it's not a escaping issue so far.

The console gives me the error Invalid escape with the above. Removing the escaped characters, gives me Invalid group

Reading further on the issue (invalid escape in pattern HTML/Javascript), I tried escaping ] and the console tells me Invalid character class

input:valid { border-color: green; }
input:invalid { border-color: red; }
RegExp original (Invalid escape);<br/>
<input type="tel" name="mobile" autocomplete="tel" placeholder="Mobile Number" pattern="^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$" required="required">
<br/><br/><br/>
RegExp with escaped ] (Invalid character class):<br/>
<input type="tel" name="mobile" autocomplete="tel" placeholder="Mobile Number" pattern="^(?:(?:\(?(?:0(?:0|11)\)?[\s-\]?\(?|\+)44\)?[\s-\]?(?:\(?0\)?[\s-\]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-\]?\d{4,5})|(?:\d{4}\)?[\s-\]?(?:\d{5}|\d{3}[\s-\]?\d{3}))|(?:\d{3}\)?[\s-\]?\d{3}[\s-\]?\d{3,4})|(?:\d{2}\)?[\s-\]?\d{4}[\s-\]?\d{4}))(?:[\s-\]?(?:x|ext\.?|\#)\d{3,4})?$" required="required">
<br/><br/><br/>
RegExp with no escaped characters (Invalid group):<br/>
<input type="tel" name="mobile" autocomplete="tel" placeholder="Mobile Number" pattern="^(?:(?:(?(?:0(?:0|11))?[s-]?(?|+)44)?[s-]?(?:(?0)?[s-]?)?)|(?:(?0))(?:(?:d{5})?[s-]?d{4,5})|(?:d{4})?[s-]?(?:d{5}|d{3}[s-]?d{3}))|(?:d{3})?[s-]?d{3}[s-]?d{3,4})|(?:d{2})?[s-]?d{4}[s-]?d{4}))(?:[s-]?(?:x|ext.?|#)d{3,4})?$" required="required">
<br/><br/><br/>
<button onclick="alert(/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/.test('07904 333 278'))">Test JS</button>
Robert Daly
  • 377
  • 1
  • 9
  • Check out [this thread](https://stackoverflow.com/questions/39895209/html-input-pattern-not-working/39899720#39899720). All you need to do is to remove ``\`` in front of `#` since it is not one of the following chars: `^`, `$`, ``\``, `.`, `*`, `+`, `?`, `(`, `)`, `[`, `]`, `{`, `}`, `|`. – Wiktor Stribiżew Oct 11 '17 at 11:10
  • You are a legend, thank you very much. – Robert Daly Oct 11 '17 at 11:19
  • Just follow a simple rule: do not escape what does not need to be escaped in a regex pattern, and try to write patterns with as few escapes as possible. – Wiktor Stribiżew Oct 11 '17 at 11:20

0 Answers0