Search code examples
htmlregexfirefoxabidefoundation-abide

Firefox input pattern regex range


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.


Solution

  • 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>