HTML fornece validação integrada via atributos, então o navegador bloqueia envios inválidos e mostra mensagens — sem JavaScript necessário.
html
Submit
HTML fornece validação integrada via atributos, então o navegador bloqueia envios inválidos e mostra mensagens — sem JavaScript necessário.
Submit
Os atributos de validação: required, min/max, minlength/maxlength, pattern (regex), e o próprio tipo (email, url, number). No envio, o navegador os verifica, interrompe o envio se algum falhar, e mostra uma bolha nativa no primeiro campo inválido.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Você pode ler e customizar a validação em JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity permite que você adicione regras que os atributos não conseguem expressar (ex: "confirmar que a senha corresponde").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Sempre valide no servidor também — a validação do cliente é para UX; usuários podem contorná-la.
A validação nativa oferece mensagens de erro acessíveis, localizadas e feedback instantâneo gratuitamente.
Combine os atributos declarativos com a API de Validação de Restrições para regras customizadas — mas nunca confie nela como sua única linha de defesa; o servidor deve validar também.