Baixa adoção da validação de formulários HTML
- Os formulários HTML têm um mecanismo de validação poderoso, mas ele é pouco usado. Muita gente nem conhece bem esse recurso. Isso pode ser um defeito de design.
Atributos, métodos e propriedades
- É possível adicionar o atributo
required para impedir entradas vazias.
- Há três maneiras de adicionar restrições à entrada:
- usar valores específicos do atributo
type: "email", "number", "url"
- usar outros atributos de entrada, como
"pattern" ou "maxlength"
- usar o método DOM
setCustomValidity: a forma mais poderosa, capaz de criar lógica de validação arbitrária e lidar com casos complexos.
As sutilezas da API imperativa
- A API
setCustomValidity é fornecida apenas como método, o que a torna inconveniente de usar.
- Por exemplo, é possível implementar algo equivalente ao atributo
required para impedir o envio do formulário quando o campo estiver vazio.
- Na renderização inicial, é preciso definir o campo como inválido se ele estiver vazio.
O problema do boilerplate
- A forma de validar valores iniciais é trabalhosa.
- A lógica de validação fica duplicada entre o handler
onChange e a etapa de renderização inicial.
- A combinação
useRef + useLayoutEffect + onChange é complexa.
O que está faltando
- É necessário um atributo
custom-validity.
- Em frameworks declarativos, isso permitiria definir a validação de entrada de forma poderosa.
O poder da validação assíncrona
- É possível lidar com casos em que um nome de usuário só deve ser válido se ainda não estiver em uso.
- Isso exige uma chamada assíncrona ao servidor e um estado intermediário.
Implementação
- A função
verifyUsername é usada para verificar a unicidade do nome de usuário.
useQuery é usado para gerenciar o estado das requisições ao servidor.- O atributo
customValidity é usado para descrever o fluxo de validação assíncrona.
Formulário de confirmação de senha
- É implementado um formulário em que a senha digitada precisa ser repetida.
- A validação verifica se os dois campos de entrada coincidem.
Conclusão
setCustomValidity pode atender a várias necessidades de validação.- Uma API poderosa fornece a verdadeira capacidade.
- Há expectativa de que esse recurso seja adicionado à especificação HTML.
Resumo do GN⁺
- A validação de formulários HTML é poderosa, mas pouco aproveitada. Isso pode acontecer por causa da complexidade da API.
- O método
setCustomValidity é uma ferramenta poderosa para lidar com lógica de validação complexa.
- O texto apresenta formas de lidar com cenários complexos, como validação assíncrona.
- Este artigo oferece informações úteis para ajudar desenvolvedores a aproveitarem melhor a validação de formulários HTML.
1 comentários
Comentários do Hacker News
Os navegadores ainda não permitem alterar o estilo das mensagens nativas de validação HTML, e Chrome e Firefox não seguem as diretrizes de UI da plataforma do sistema operacional, entrando em conflito com a estética do projeto
<select multiple>Usar certos valores no atributo
type(como "email", "number", "url") pode acionar o teclado ideal no mobile, melhorando bastante a experiência do usuárioAs pessoas que escrevem as especificações estão desconectadas do uso real; serve para coisas simples, mas para formulários complexos é melhor fazer por conta própria
Há arrependimento por ter ignorado a simplicidade básica dos formulários, além de agradecimento por compartilhar a perspectiva de outra pessoa
Quando uma checkbox tem um rótulo, há um pedido para adicionar o atributo "for" ao rótulo, para que clicar nele ative/desative a checkbox
Exemplo simples fornecido sem usar React
A validação de formulários HTML é excelente, mas há um grande problema: ela não funciona no Firefox para Android
Muitos frameworks e bibliotecas oferecem recursos de validação estiláveis, então não vale a pena se dar ao trabalho
É preciso tomar cuidado para não exagerar no uso da validação
Sites que usam
type=passwordpor engano em campos de entrada de 2FA confundem gerenciadores de senhas e navegadores