𝗩𝗮𝗹𝗶𝗱𝗮𝗰̧𝗮̃𝗼 𝗱𝗲 𝗙𝗼𝗿𝗺𝘂𝗹𝗮́𝗿𝗶𝗼𝘀 𝗲𝗺 𝟮𝟬𝟮𝟲: 𝗣𝗮𝗿𝗲 𝗱𝗲 𝗨𝘀𝗮𝗿 𝗟𝗶𝗯𝗿𝗮𝗿𝗲́𝗮𝘀 𝗗𝗲𝘀𝗻𝗲𝗰𝗲𝘀𝘀𝗮́𝗿𝗶𝗮𝘀
Você não precisa de uma biblioteca JavaScript pesada para validar um formulário em 2026.
Eu lancei um formulário de checkout no mês passado usando zero bibliotecas de validação. Ele lidou com campos obrigatórios, formatos de e-mail e comprimentos de senha usando apenas HTML nativo e 30 linhas de JavaScript.
Antes de executar npm install, use estes seis atributos nativos para resolver a maioria dos problemas:
• required: Impede envios vazios para campos de texto, selects e checkboxes.
• type: Use type="email" ou type="url" para capturar erros básicos de formato.
• minlength e maxlength: Impõem limites de caracteres sem lógica personalizada.
• min, max e step: Controlam intervalos para números e datas.
• pattern: Usa regex para impor formatos específicos, como códigos postais.
• inputmode e autocomplete: Reduzem erros ao mostrar o teclado correto ou preencher dados conhecidos.
Se as mensagens nativas forem muito genéricas, use a Constraint Validation API.
Cada input possui um objeto validity. Você pode verificar propriedades como valueMissing ou typeMismatch para escrever mensagens de erro úteis. Use setCustomValidity para exibir seu próprio texto.
Lembre-se de limpar sua mensagem personalizada no evento input. Caso contrário, o campo permanecerá travado em um estado de erro mesmo após o usuário corrigi-lo.
Para estilização, pare de usar JavaScript para rastrear se um campo foi "tocado" (touched).
A pseudo-classe CSS :user-invalid resolve isso agora. Ela só aplica estilos após o usuário interagir com um campo. Combine-a com o seletor :has() para exibir o texto de erro automaticamente. Isso remove dezenas de linhas de código desnecessário.
Quando você deve realmente usar uma biblioteca?
Só recorra a uma biblioteca em dois casos específicos:
- Validação entre campos (Cross-field validation): Quando um campo depende de outro, como "confirmar senha" ou lógica condicional complexa.
- Validação assíncrona (Async validation): Quando você precisa consultar um banco de dados, como "este nome de usuário já está em uso?".
Se o seu formulário precisa apenas de regras de campo único, mantenha-se no nativo. Menos código significa menos bugs. Comece pelo navegador. Só adicione uma biblioteca quando o navegador atingir seu limite.
Optional learning community: https://t.me/GyaanSetuAi