Atributos de validação de formulários
Aplique os atributos required, minlength, maxlength, pattern, min, max e step e estilize estados de validação com as pseudo-classes :valid e :invalid.
Atributos de validação de formulários é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Validação nativa do navegador
O HTML5 fornece validação integrada de formulários por meio de atributos. Quando um formulário é enviado, o navegador valida cada campo. Se a validação falhar, ele exibe uma dica de erro nativa e impede o envio — sem necessidade de JavaScript nos casos básicos.
required
Adicionar required a um campo de entrada, elemento de seleção ou área de texto torna o preenchimento obrigatório. O navegador exibe um erro se o campo estiver vazio quando o formulário for enviado.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>Comprimento mínimo e máximo
minlength impõe uma quantidade mínima de caracteres. maxlength impede a entrada de mais caracteres que o máximo permitido. Combine-os para impor a complexidade de senhas ou limitar o comprimento de comentários.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max e step para campos numéricos
min e max definem o intervalo válido para campos de número e data. step define o incremento — útil para intervalos (5%), precisão decimal e valores somente de data.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — validação com expressão regular
pattern aceita uma expressão regular de JavaScript. O campo precisa corresponder ao padrão para que o formulário seja enviado. Inclua um title para descrever o formato esperado na dica de erro do navegador.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — desativação da validação nativa
Adicione novalidate ao elemento <form> para desativar toda a validação nativa do navegador. Faça isso quando implementar uma validação personalizada em JavaScript, para oferecer ao usuário uma experiência consistente.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Verificando a validade em JavaScript
A API de validação de restrições permite verificar a validade programaticamente: input.validity (objeto ValidityState), input.checkValidity() (retorna um booleano), input.setCustomValidity(message) (define um erro personalizado).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Chame setCustomValidity(message) com uma cadeia não vazia para marcar um input como inválido com uma mensagem personalizada. Chame-o com uma cadeia vazia para limpar o erro. Isso é útil para campos validados pelo servidor, como a exclusividade de username.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid e :invalid — pseudoclasses
Estilize inputs válidos e inválidos com pseudoclasses de CSS. Tenha cuidado: os inputs são :invalid antes de a pessoa usuária interagir com eles. Use :user-invalid (navegadores modernos) ou JavaScript para adicionar primeiro uma classe 'touched'.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Mensagens de erro personalizadas com reportValidity
form.reportValidity() aciona a interface de validação nativa do navegador em todos os campos. Use-o depois de definir mensagens de validade personalizadas para mostrá-las à pessoa usuária sem esperar por um evento de envio.
Padrão acessível para exibição de erros
Mostre erros em linha usando: 1) aria-invalid="true" no input, 2) um parágrafo de erro visível vinculado com aria-describedby, 3) mova o foco para o primeiro campo inválido. Isso atende a todas as pessoas usuárias, incluindo quem usa leitores de tela.
Verificação rápida
Qual atributo limita um input de texto a um máximo de 280 caracteres?
Recapitulação: atributos de validação de formulários
required, minlength/maxlength, min/max/step, pattern — todos fornecem validação nativa do navegador gratuitamente. Use novalidate ao implementar uma validação personalizada com JS. A API de validação de restrições dá ao JavaScript acesso ao estado de validade. Estilize os erros com :user-invalid depois que a pessoa usuária tiver interagido.
Perguntas Frequentes
A aula “Atributos de validação de formulários” é grátis?
Sim — o texto completo de “Atributos de validação de formulários” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Atributos de validação de formulários”?
Aplique os atributos required, minlength, maxlength, pattern, min, max e step e estilize estados de validação com as pseudo-classes :valid e :invalid. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Atributos de validação de formulários”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Controles de formulário: tipos de input, select e textarea
- ARIA e acessibilidade: label, role e aria-*
- HTML5 semântico: semântica versus sopa de divs
- Atributos de validação de formulários