Como Tratar Erros em Formulários com JavaScript

Você já preencheu um formulário na web e recebeu algum tipo de erro? Aprenda como tratar erros em formulários com JavaScript!

Para tratar erros em formulários com JavaScript, você combina a validação nativa do HTML (atributos como required, type e pattern) com validação personalizada em JavaScript, usando a Constraint Validation API (métodos como checkValidity() e setCustomValidity()). Assim você verifica os campos antes do envio e exibe mensagens de erro claras ao usuário.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Nesta aula, o instrutor ensina a tratar erros em formulários com JavaScript, fazer a validação antes de enviar. Ele mostra como pegar o campo pelo ID (getElementById), impedir o envio com preventDefault quando algo está errado (campo vazio, nome com menos de 3 caracteres) e exibir a mensagem de erro adequada para o usuário.

Neste vídeo (33 min):

• 0:00 - O objetivo: validar um formulário com JavaScript antes de enviar.
• 4:00 - Detectar o campo vazio (o problema mais comum).
• 12:00 - Pegar o campo pelo ID (getElementById).
• 16:00 - Impedir o envio com preventDefault quando algo está errado.
• 24:00 - Validar as regras (ex.: nome com o mínimo de caracteres) e mostrar o erro.

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Como Tratar Erros em Formulários com JavaScript

Os formulários são elementos essenciais em praticamente todos os sites e sistemas online. Na aula passada, te mostrei como criar um formulário básico para uma página web.

No entanto, criar o formulário é apenas o primeiro passo. É essencial garantir que o usuário envie dados corretos e completos para que o servidor possa processá-los adequadamente.

Para isso, é necessário implementar verificações para evitar dados incompletos ou incorretos.

Nesta aula, abordaremos as melhores práticas para lidar com erros em formulários. Vamos desde validações básicas em HTML até técnicas mais avançadas de tratamento de erros com JavaScript.

Código HTML do Formulário Inicial

No material disponível para download, você encontrará o código com o gabarito desta aula. Para acompanhar o passo a passo, sugiro que crie um formulário HTML como o abaixo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Meu formulário</h1>
    <form action="index.html" style="display: flex; flex-direction: column">
      <label for="nome">Nome</label>
      <input name="nome" id="nome" type="text" placeholder="Daniel Porto" />
      <label for="email">Email</label>
      <input
        name="email"
        id="email"
        type="email"
        placeholder="daniel@mail.com"
      />
      <label for="senha">Senha</label>
      <input name="senha" id="senha" type="password" />
      <button type="reset">Resetar</button>
      <button type="submit">Enviar</button>
    </form>
  </body>
</html>

Para entender melhor o processo de criação do formulário, não deixe de conferir a aula: Como Criar Formulários em Páginas Web

Validação de Formulário com HTML

A maneira mais simples de fazer a validação de formulário é usando HTML. Ao adicionar o atributo required dentro das tags <input>, você garante que um campo específico deve ser preenchido antes que o formulário possa ser enviado.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Meu formulário</h1>
    <form action="index.html" style="display: flex; flex-direction: column">
      <label for="nome">Nome</label>
      <input
        name="nome"
        id="nome"
        type="text"
        placeholder="Daniel Porto"
        required
      />
      <label for="email">Email</label>
      <input
        name="email"
        id="email"
        type="email"
        placeholder="daniel@mail.com"
        required
      />
      <label for="senha">Senha</label>
      <input name="senha" id="senha" type="password" required />
      <button type="reset">Resetar</button>
      <button type="submit">Enviar</button>
    </form>
  </body>
</html>

Agora, quando o usuário tentar enviar o formulário sem preencher os campos corretamente, uma mensagem de erro será exibida na tela.

Além disso, como definimos os tipos de input através do atributo type, o navegador exibirá uma mensagem de erro se os dados não forem preenchidos corretamente.

Ou seja, ao adicionar o atributo required e definir corretamente o atributo type, o sistema realiza verificações automáticas para garantir que os dados estejam preenchidos e corretos.

Validação Avançada com JavaScript – Ajustando o HTML

Embora o atributo required seja útil, ele não cobre todos os cenários de validação possíveis. Por exemplo, ele não valida o comprimento ou os caracteres específicos de uma senha. Para essas validações mais avançadas, podemos utilizar JavaScript.

Para isso, vamos criar um arquivo chamado script.js na mesma pasta onde está o nosso formulário.

Para conectar o HTML ao arquivo JavaScript, adicione uma tag <script> dentro da seção <head>.

Nessa tag, defina o caminho (src) para o arquivo JavaScript e utilize o atributo defer, que garante que o script será carregado somente após o conteúdo do HTML ser totalmente processado.

Em seguida, vamos atribuir um id ao nosso formulário, na tag <form>, para facilitar sua manipulação no JavaScript.

Além disso, para exibir as mensagens de erro geradas pelo JavaScript, incluiremos uma lista não ordenada (<ul>) no HTML. Essa lista exibirá os erros do formulário em vermelho.

Dentro da tag <ul>, definiremos um id que o JavaScript usará para manipular esse elemento e exibir as mensagens de erro de forma dinâmica.

Aplicaremos um estilo CSS inline para organizar as mensagens em uma coluna com espaçamento de 10px, exibidas em vermelho e negrito.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./script.js" defer></script>
</head>
<body>
    <h1>Meu formulário</h1>
    <form id='formulario' action="index.html" style="display: flex; flex-direction: column;">
        <label for="nome">Nome</label>
        <input name='nome' id='nome' type="text" placeholder="Daniel Porto">
        <label for="email">Email</label>
        <input name='email' id='email' type='email' placeholder="daniel@mail.com">
        <label for="senha">Senha</label>
        <input name='senha' id='senha' type='password'>
        <button type="reset">Resetar</button>
        <button type="submit">Enviar</button>
    </form>
    <ul id='caixa-erros' style="display: flex; flex-direction: column; gap: 10px; color: red; font-weight: 600;">
    </ul>
</body>
</html>

Aprenda mais sobre HTML, suas principais tags e atributos com nosso curso gratuito: Curso de Introdução ao HTML e CSS – Criando Página do Google

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Tratar Erros em Formulários com JavaScript – Validar Formulário

Dentro do arquivo JavaScript, começaremos capturando os elementos do documento HTML que serão usados para validar e manipular o formulário.

Utilizaremos o método getElementById para selecionar cada elemento com base no seu id. Cada um desses elementos será armazenado em uma variável correspondente.

const campoNome = document.getElementById("nome");
const campoSenha = document.getElementById("senha");
const caixaErros = document.getElementById("caixa-erros");
const form = document.getElementById("formulario");

As variáveis campoNome e campoSenha fazem referência aos campos de entrada para nome e senha, respectivamente. A variável caixaErros aponta para a lista<ul> onde serão exibidos os erros, e a variável form refere-se ao formulário em si.

Definidas essas variáveis, vamos criar a função enviarFormulario, que será responsável por validar os dados dos campos de nome e senha antes de permitir que o formulário seja enviado.

Essa função recebe o parâmetro evt, que representa o evento gerado pelo navegador quando ocorre a tentativa de submissão do formulário. O nome evt foi escolhido para ser intuitivo e claro, mas poderíamos usar qualquer outro nome.

Dentro dessa função, criaremos um array vazio chamado listaErros para armazenar as mensagens de erro de validação que serão exibidas ao usuário.

const campoNome = document.getElementById("nome");
const campoSenha = document.getElementById("senha");
const caixaErros = document.getElementById("caixa-erros");
const form = document.getElementById("formulario");

function enviarFormulario(evt) {
  const listaErros = [];
}

Em seguida, vamos definir as validações necessárias para o nosso formulário. A primeira delas é a validação do nome.

Verificamos se o campo de nome está vazio (campoNome.value === “”) ou se o comprimento do valor inserido é menor que 3 caracteres (campoNome.value.length < 3).

Se qualquer uma dessas condições for verdadeira, adicionamos uma mensagem de erro ao array listaErros usando o método .push().

function enviarFormulario(evt) {
  const listaErros = [];
  if (campoNome.value === "" || campoNome.value.length < 3) {
    listaErros.push(
      "O nome deve ser preenchido com um texto de no mínimo 3 caracteres"
    );
  }
}

Depois, vamos verificar se o comprimento da senha é inferior a 7 caracteres ou superior a 22 caracteres. Se a senha não estiver dentro desse intervalo, adicionaremos outra mensagem de erro ao array listaErros.

function enviarFormulario(evt) {
  const listaErros = [];
  if (campoNome.value === "" || campoNome.value.length < 3) {
    listaErros.push(
      "O nome deve ser preenchido com um texto de no mínimo 3 caracteres"
    );
  }
  if (campoSenha.value.length < 7 || campoSenha.value.length > 22) {
    listaErros.push(
      "O campo senha deve ser obrigatoriamente preenchido com uma informação entre 7 e 22 caracteres"
    );
  }
}

Por fim, verificamos se o array listaErros contém alguma mensagem de erro, ou seja, se seu comprimento é diferente de 0 (listaErros.length !== 0).

Se essa condição for verdadeira, chamamos o método evt.preventDefault(), que previne o comportamento padrão do evento, neste caso, o envio do formulário. Sem essa chamada, o formulário seria enviado mesmo que houvesse erros de validação.

Além disso, percorremos o array listaErros usando um loop for. Para cada erro armazenado no array, criamos um item de lista (<li>) e o adicionamos ao elemento caixaErros.

O conteúdo de cada item de lista é definido pela string ${listaErros[indice]}, que insere o erro atual na lista.

O loop é controlado pelo contador indice, que começa em 0 e aumenta a cada iteração (indice++) até atingir o comprimento do array listaErros (indice < listaErros.length).

Saiba mais sobre laços de repetição em JavaScript na aula: Loops em Javascript [Estrutura de Repetição em Javascript]

function enviarFormulario(evt) {
  const listaErros = [];
  if (campoNome.value === "" || campoNome.value.length < 3) {
    listaErros.push(
      "O nome deve ser preenchido com um texto de no mínimo 3 caracteres"
    );
  }
  if (campoSenha.value.length < 7 || campoSenha.value.length > 22) {
    listaErros.push(
      "O campo senha deve ser obrigatoriamente preenchido com uma informação entre 7 e 22 caracteres"
    );
  }
  if (listaErros.length !== 0) {
    evt.preventDefault();
    for (let indice = 0; indice < listaErros.length; indice++) {
      caixaErros.innerHTML += `<li>${listaErros[indice]}</li>`;
    }
  }
}

Com a função concluída, só precisamos adicionar um EventListener à variável form para garantir que o processo de validação ocorra sempre que houver uma tentativa de enviar o formulário.

const campoNome = document.getElementById("nome");
const campoSenha = document.getElementById("senha");
const caixaErros = document.getElementById("caixa-erros");
const form = document.getElementById("formulario");

function enviarFormulario(evt) {
  const listaErros = [];
  if (campoNome.value === "" || campoNome.value.length < 3) {
    listaErros.push(
      "O nome deve ser preenchido com um texto de no mínimo 3 caracteres"
    );
  }
  if (campoSenha.value.length < 7 || campoSenha.value.length > 22) {
    listaErros.push(
      "O campo senha deve ser obrigatoriamente preenchido com uma informação entre 7 e 22 caracteres"
    );
  }
  if (listaErros.length !== 0) {
    evt.preventDefault();
    for (let indice = 0; indice < listaErros.length; indice++) {
      caixaErros.innerHTML += `<li>${listaErros[indice]}</li>`;
    }
  }
}

form.addEventListener("submit", enviarFormulario);

Com isso, quando o usuário tentar enviar o formulário sem preencher adequadamente algum campo, ele será informado sobre os problemas encontrados para que possa corrigi-los.

É importante que as mensagens exibidas ao usuário sejam claras para que ele faça as correções necessárias.

Perguntas frequentes

Conclusão – Como Tratar Erros em Formulários com JavaScript

Validar formulários é uma etapa essencial no desenvolvimento web. Nesta aula, te mostrei como construir validações diretamente no HTML e como criar funções completas para tratar erros com JavaScript.

Essas práticas garantem que os dados enviados pelo usuário estejam corretos e preenchidos adequadamente, melhorando não apenas a segurança do seu site ou aplicação, mas também a experiência do usuário.

Para saber como construir programas e projetos ainda mais completos utilizando o JavaScript, confira nosso Curso Completo JavaScript Impressionador!

Veja também: Projetos JavaScript: o que são, ideias e como colocá-las em prática