HTML Academy · Aula

O atributo novalidate

Desative a validação do navegador ao gerenciá-la por conta própria.

O atributo novalidate é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 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 HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Limitações da validação do navegador

A validação integrada do HTML5 tem limitações:

As mensagens de erro dependem do navegador e são difíceis de estilizar
A validação é executada somente ao enviar o formulário, não ao perder o foco ou inserir dados
Regras de negócio complexas (confirmação de senha, username exclusivo) são impossíveis

Quando precisar de controle total, desative a validação integrada com novalidate.

novalidate em um formulário

Adicionar novalidate a um formulário desativa toda a validação do navegador:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

Por que usar novalidate?

Motivos comuns para desativar a validação do navegador:

Estilização personalizada das mensagens de erro, de acordo com o seu sistema de estilos
Validação em tempo real (ao perder o foco ou inserir dados, não apenas ao enviar)
Validação de vários campos (por exemplo, confirmação de senha)
Exibição de erros do servidor após um redirecionamento
Bibliotecas de validação de terceiros (Zod, Yup, React Hook Form)

Padrão de validação personalizada

Crie uma validação personalizada com novalidate:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

formnovalidate em um botão

Desative a validação para um botão de envio específico sem usar novalidate no formulário inteiro:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Estilização de erros personalizados

Estilização de erros de validação personalizados:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Erros personalizados acessíveis

Torne as mensagens de erro personalizadas acessíveis:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Estratégias de momento da validação

Quando validar com novalidate:

Ao enviar — mais simples; valide tudo de uma vez
Ao perder o foco — valide cada campo quando o usuário sair dele
Ao inserir dados — em tempo real; oferece a melhor experiência, mas pode parecer agressivo
Híbrida — valide ao perder o foco; remova os erros ao inserir dados

Padrão híbrido: perder o foco + inserir dados

A abordagem de validação mais amigável para o usuário:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate e validação no servidor

Valide sempre também no servidor:

A validação no cliente serve para a experiência do usuário
A validação no servidor serve para a segurança
Os usuários podem contornar a validação do HTML modificando as requisições
A validação personalizada com novalidate e JS deve reproduzir as regras do servidor

Bibliotecas de validação

Bibliotecas populares de validação em JavaScript que funcionam com novalidate:

Zod — validação de esquemas voltada primeiro para TypeScript
Yup — validação de esquemas de objetos
Valibot — biblioteca leve de esquemas
React Hook Form — estado e validação de formulários para React

Testando a validação personalizada

Como testar a validação personalizada de formulários:

Teste o envio vazio (campos obrigatórios)
Teste formatos inválidos (e-mail incorreto, padrão de telefone)
Teste casos extremos (apenas espaços, Unicode, textos muito longos)
Teste com um leitor de tela para verificar os anúncios de erro
Teste a navegação pelo teclado entre os campos após a exibição de um erro

Verificação rápida

O que formnovalidate em um botão faz?

Recapitulação: novalidate

Princípios essenciais de novalidate:

novalidate no formulário — desativa toda a validação do navegador
formnovalidate no botão — desativa a validação apenas para aquele envio
Use validação personalizada para controlar a experiência do usuário e aplicar regras complexas
Valide sempre no servidor — a validação no cliente pode ser contornada
Anuncie os erros de forma acessível com role="alert" e aria-invalid

Perguntas Frequentes

A aula “O atributo novalidate” é grátis?

Sim — o texto completo de “O atributo novalidate” é 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 HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O atributo novalidate”?

Desative a validação do navegador ao gerenciá-la por conta própria. Você pratica HTML 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 HTML Academy?

Nenhuma experiência prévia é necessária. HTML 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 2 de 4.

Quanto tempo leva a aula “O atributo novalidate”?

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 HTML Academy?

Sim. Cada aula de HTML 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

← Voltar para HTML Academy