3

This is related to the same problem as this question:

Firefox error: Unable to check input because the pattern is not a valid regexp: invalid identity escape in regular expression

When using escaped characters in the <input> pattern attribute, Firefox throws these errors to the console:

Unable to check <input pattern='^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s\'-]{1,50}$'> because the pattern is not a valid regexp: invalid identity escape in regular expression

So when using the pattern attribute on an <input> field, the unicode characters no longer need to be escaped. In that case the user simply needs to stop escaping their characters and change \@\% to @%, problem solved.

I've got this somewhat more complicated regex pattern, what do I change it to to work in Firefox?

<input type="text" pattern="^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s\'-]{1,50}$">

Essentially it's allowing for any string between 1..50 characters in length as long as all the characters are within these ranges:

  • \u00A0-\uD7FF
  • \uF900-\uFDCF
  • \uFDF0-\uFFEF
  • a-z
  • A-Z

as well as whitespace, apostrophes and hyphens. A quick search sees the \u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa part of it fairly widely used in all sorts of regexes. I just don't see exactly what to use instead of the escaped unicode character references here.

Community
  • 1
  • 1
duncan
  • 31,401
  • 13
  • 78
  • 99
  • 1
    Remove the escape before the single quote - that is all you need to fix the problem. Besides, you do not need the anchors here, remove `^` and `$` since the HTML5 pattern is anchored by default. – Wiktor Stribiżew May 19 '17 at 10:44
  • 1
    @WiktorStribiżew I didn't realise it was just that which was causing the problem, I assumed it was all the unicode references! Post this as the answer :-) – duncan May 19 '17 at 10:46

1 Answers1

4

You need to remove the escaping backslash before the single quote.

Note that in a regular HTML5 pattern field, one does not have to use ^ and $ anchors at the pattern start/end as the HTML5 pattern attribute encloses the passed pattern with ^(?: and )$. However, as per your feedback, the Abide validation circumvents this and passes unanchored pattern to the regex engine. Thus, you should keep the anchors.

<input type="text" pattern="^[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s'-]{1,50}$">

A quick demo:

<form>
  <input type="text" pattern="[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEFa-zA-Z\s'-]{1,50}">
  <input type="submit">
</form>
Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
  • Actually I found without the `^$` it validated a string like `5e` which should be invalid. – duncan May 19 '17 at 10:52
  • It does not match `5e`. Try it if you are in Chrome. Firefox does not let it pass either. – Wiktor Stribiżew May 19 '17 at 10:56
  • Hmm possibly something else on our page is interfering with it; we're also using Foundation Abide to validate this form. – duncan May 19 '17 at 11:03
  • Yes, in fact Abide's validation circumvents the browser's, and it creates a JS regex with the pattern attribute I've specified, without any `^$` – duncan May 19 '17 at 11:11
  • 1
    @duncan: I understand, and it really is a good idea to use the anchors always if you need a full string match. I just follow the minimalistic approach usually. It would be nice to add to the question that the pattern is actually processed with the Abide's validation mechanism rather than the standard HTML5 pattern processing one. – Wiktor Stribiżew May 19 '17 at 11:23