O problema de expressões regulares é que elas não funcionam exatamente da mesma forma em todas as linguagens/engines/API's, e um recurso que existe em uma não necessariamente será suportado em outra.
No caso do JavaScript, ele não suporta as flags inline, como o (?i)
(que serve para tornar a expressão case insensitive, ou seja, não diferenciar letras maiúsculas de minúsculas). E a documentação diz que a expressão deve ser uma regex válida em JavaScript, e quando a expressão é inválida, o atributo pattern
é ignorado.
Inclusive no regex101.com, no menu do lado esquerdo existe a opção FLAVOR para você escolher a engine de regex. E se você escolher "ECMAScript (JavaScript)", verá que a expressão de fato é inválida, por causa do (?i)
.
Se você retirar esta flag, a expressão funciona. Mas ela deixa de ser case insensitive, então não vai mais aceitar coisas como "WWW.youTubE.Com", por exemplo:
<form>
<input id="campo" type="text" pattern="(?:(?:https?:)?\/\/)?(?:(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+))" required />
<input type="submit" value="ok">
</form>
Mudei o trecho (?:https:|http:)
para (?:https?:)
(o s?
indica que a letra "s" é opcional).
Se quiser fazer a validação case insensitive, o jeito é fazer fora do input
:
let regex = /^((?:(?:https?:)?\/\/)?(?:(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+)))$/i;
document.querySelector('#form').addEventListener('submit', function(event) {
let url = document.querySelector('#campo').value;
if (regex.test(url)) return true;
alert('URL inválida');
event.preventDefault();
return false;
});
<form id="form">
<input id="campo" type="text" required />
<input type="submit" value="ok">
</form>
Repare que criei a regex usando /etc.../i
- o "i" no final indica que ela é case insensitive. E também incluí os marcadores ^
e $
, que indicam o início e fim da string, para garantir que o campo só tem o que está especificado pela regex (no atributo pattern
não é necessário, pois por default ele já considera que o campo só pode ter o que está na regex).
Infelizmente não há como fazer de maneira prática no próprio pattern
do input
. Uma "solução" (que de tão horrível, eu considero uma gambiarra horrenda, não use), seria em vez de youtube
, colocar [Yy][Oo][Uu][Tt][uU][Bb][Ee]
(e faça isso para todas as letras que quer case insensitive). Mas fica - na minha opinião - ruim demais, eu prefiro a segunda solução sugerida acima, fazendo a validação no JavaScript mesmo, fora do pattern
.
Mas se quer que apenas o ID do vídeo seja case insensitive, basta mudar para (?<YoutubeID>[a-zA-Z0-9-_]{11,12})
- adicionando A-Z
, ela também considera letras maiúsculas.