0Pricing
JavaScript Academy · Aula

A API de validação de restrições

Use a verificação de validade integrada.

A API de validação de restrições é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Validação integrada

Os campos de formulário do HTML aceitam atributos como required, min, max, pattern e type="email". A API de Validação de Restrições permite que o JavaScript inspecione e controle essa validação integrada.

checkValidity

checkValidity retorna um booleano e aciona um evento invalid em cada controle que falhar, sem exibir o balão do navegador.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity é semelhante a checkValidity, mas também exibe a interface de mensagens de validação do navegador para os campos inválidos.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

O objeto de validade

Cada controle tem um objeto validity com sinalizadores booleanos que descrevem exatamente o problema.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid só é verdadeiro quando o campo atende a todas as restrições, resumindo os outros sinalizadores.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage contém a mensagem localizada que o navegador exibiria para o erro atual.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity marca um campo como inválido com uma mensagem personalizada. Uma cadeia não vazia significa que o campo é inválido; uma cadeia vazia limpa a mensagem.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Sempre limpe os erros personalizados

Se você definir uma mensagem personalizada, deverá limpá-la com uma cadeia vazia assim que o campo se tornar válido; caso contrário, ele permanecerá inválido para sempre.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

O evento de invalidez

Ouça o evento invalid para executar uma lógica personalizada, como aplicar estilo a um campo, quando a validação falhar.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Desativando os balões nativos

Adicione novalidate ao formulário para suprimir as janelas nativas e continuar usando a API para suas próprias mensagens.

form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) e.preventDefault();
});

Estilização com :valid e :invalid

As pseudo-classes :valid e :invalid do CSS estilizam automaticamente os campos com base em seu estado de validade.

Verificação rápida

Regra de validação personalizada.

Resumo

A API de Validação de Restrições funciona com os atributos de restrição do HTML. Use checkValidity/reportValidity para verificar (e, opcionalmente, exibir) erros, inspecione os sinalizadores de validity e validationMessage e adicione regras personalizadas com setCustomValidity (limpe-as com uma cadeia vazia). O evento invalid e o CSS :valid/:invalid ajudam na estilização.

Perguntas Frequentes

A aula “A API de validação de restrições” é grátis?

Sim — o texto completo de “A API de validação de restrições” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “A API de validação de restrições”?

Use a verificação de validade integrada. Você pratica JavaScript 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 JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript 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 “A API de validação de restrições”?

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

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

  1. Lendo valores de entrada
  2. O evento submit
  3. Validação no cliente
  4. A API de validação de restrições
← Voltar para JavaScript Academy