This is related to the same problem as this question:
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:
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.
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>