Conforme dito na documentação (e também explicado aqui), a regex que está no atributo pattern
é compilada com a flag u
(tem mais detalhes sobre esta flag aqui).
O que acontece é que quando esta flag está habilitada, a sintaxe da regex se torna mais restrita e passa a não aceitar determinados padrões. Veja a diferença:
// sem flag "u", OK
let r1 = /[a-z]{,2}/;
console.log('regex ok', r1);
// com flag "u", erro (Incomplete quantifier)
let r2 = /[a-z]{,2}/u;
console.log('não será impresso, pois dá erro na linha acima', r2);
Repare que a primeira regex não dá erro, mas a segunda sim. A presença da flag u
faz com que a sintaxe se torne mais restrita e não aceite o quantificador sem o valor inicial (dá um erro: "Incomplete quantifier"). E quando a regex é inválida, o atributo pattern
é ignorado.
Para corrigir, você deve indicar explicitamente que o valor mínimo é zero:
// indicar o valor mínimo igual a zero
let r = /[a-z]{0,2}/u;
console.log('regex OK', r);
Além disso, mesmo que {,2}
não desse erro, ainda sim não iria funcionar da forma que você espera. Isso porque ele não é interpretado como um quantificador, e sim como literalmente o caractere {
, seguido de vírgula, seguido de 2
, seguido de }
. Veja:
let r = /[a-z]{,2}/;
// no máximo 2 letras (não funciona)
console.log(r.test('a')); // false
// porque a regex na verdade é "uma letra, seguida de {,2}"
console.log(r.test('a{,2}')); // true
Ou seja, a solução para aceitar no máximo 2 caracteres é de fato colocar o zero:
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{0,2}$">
<input type="submit">
</form>