Validar formulários pode ser meio treta, e por mais que libs facilitam muito esse trabalho a API nativa de validação de formulário é mais simples do que parece e muito foda
Na thread de hoje, bora conhecer a Constraint Validation API?
Segue a 🧵
A Constraint Validation API tem uma série de métodos e atributos que nos ajudam na hora de validar nossos elementos de HTML.
Essa API está disponível nos elementos:
<form>
<button>
<fieldset>
<input>
<output> (conhecia esse?)
<select>
<textarea>
Ela basicamente torna disponível nesses elementos 3 atributos e 3 métodos de instância
Os atributos são:
- validationMessage
Retorna uma mensagem localizada (sim!) dos elementos que estão invalidos
- validity
Checa a validade de cada propriedade relacionada a um elemento
- willValidate
Retorna se o elemento será validado (Se o form ou o button dele tiver o atributo novalidate, retornará false)
Os métodos são:
- checkValidity()
retorna true ou false da validade do elemento
- reportValidity
dispara um evento que reporta quais elementos estão invalidos.
Exemplo: googlechrome.github.io/samples/report-validity/
- setCustomValidity(mensagem)
Define uma mensagem de validação customizada (Aparece em um tooltip padrão do navegador que você estiver usando
Mas como usar na prática?
Bora usar o formulário abaixo como exemplo.
No input de texto temos apenas a restrição required, ou seja, o será inválido se não preenchido
No do número, só é aceito entre 1000 e 1
No do email, usamos patterns pra aceitar apenas e-mails @cuInc.com
Pra validar o formulário acima, usamos o método checkValidity pra retornar se todos os elementos do formulário passavam nas validações e depois validamos cada um:
- O preenchimento do campo de nome
- Se o campo de número estava no limite
- E o campo de e-mail respeitava o pattern
Podemos customizar a mensagem de validação de um input usando a função setCustomValidity(mensagem)
Ao usar reportValidity(), fazemos com que o erro seja reportado a cada input, não apenas no submit.
Quando usar essa API?
Se pergunte "Se não houvesse validação alguma, esse formulário causaria danos ao site, a mim ou a algum cliente?"
Digo isso pois essa validação depende apenas de atributos que cada elemento do HTML, que podem ser facilmente removidos pelo devTools
Isso significa que alguém pode simplesmente apagar patterns, requireds e outras validações, enviando dados incorretos ou maliciosos. A pessoa pode inclusive forçar um envio mesmo com o botão desabilitado usando a função `submit()` do formulário.
Portanto, se a validação for importante, é necessário que ela seja apenas uma de muitas camadas de segurança.
Quase tudo o que você precisa saber sobre essa API está na documentação
developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#the_constraint_validation_api
Infelizmente a versão em português não está correta, mas vc pode ajudar
Se você nunca contribuiu open source, uma boa oportunidade é fazer um fork desse artigo e mandar uma tradução decente para o MDN. Dessa forma você aprende como contribuições funcionam e ainda tornam a web um lugar melhor
github.com/mdn/content/edit/main/files/en-us/learn/forms/form_validation/index.md
E sobre validação nativa de formulários é só - pretendo me aprofundar mais no artigo que vem ai!
Próxima publicação (e ultima) vai ser sobre formulários e CSS!