Firefox input pattern regex range

Question

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.

Answer 1

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>