Validação básica de formulários: garantindo que os dados estão corretos

Validar formulário é como conferir uma ficha antes de entregar:
você checa se está tudo preenchido e no formato certo.

Sem validação, podem chegar dados incompletos ou inválidos, como:

• Nome vazio
• E-mail sem @
• Senha curta demais

Objetivo da validação

Garantir que os dados enviados façam sentido antes de processar ou enviar para o servidor.

Tipos comuns de validação básica

1. Campo obrigatório (não pode estar vazio)
2. Tamanho mínimo (ex.: senha com pelo menos 6 caracteres)
3. Formato básico (ex.: e-mail com estrutura válida)
4. Confirmação (ex.: confirmar senha igual à senha principal)

Fluxo simples de validação no submit

1. Capturar o evento submit
2. Usar e.preventDefault()
3. Ler os valores com .value
4. Limpar espaços com trim()
5. Verificar regras
6. Mostrar mensagens claras para o usuário

Exemplo prático

<form id="formCadastro">
  <input id="nome" type="text" placeholder="Nome" />
  <input id="email" type="email" placeholder="E-mail" />
  <input id="senha" type="password" placeholder="Senha" />
  <button type="submit">Cadastrar</button>
</form>

<p id="feedback"></p>

const form = document.getElementById("formCadastro");
const nome = document.getElementById("nome");
const email = document.getElementById("email");
const senha = document.getElementById("senha");
const feedback = document.getElementById("feedback");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  const nomeValor = nome.value.trim();
  const emailValor = email.value.trim();
  const senhaValor = senha.value.trim();

  if (nomeValor === "") {
    feedback.textContent = "Por favor, preencha o nome.";
    return;
  }

  if (!emailValor.includes("@") || !emailValor.includes(".")) {
    feedback.textContent = "Digite um e-mail válido.";
    return;
  }

  if (senhaValor.length < 6) {
    feedback.textContent = "A senha deve ter pelo menos 6 caracteres.";
    return;
  }

  feedback.textContent = "Dados válidos! Formulário pronto para envio.";
});

Melhorando a experiência do usuário

• Mostre erro perto do campo correspondente.
• Use mensagens objetivas e amigáveis.
• Evite mensagens genéricas como “Erro inválido”.
• Valide no envio e, quando fizer sentido, também durante a digitação (input).

Validação HTML + JavaScript

O HTML já ajuda com atributos como:

• required
• minlength
• maxlength
• type="email"

Mas o JavaScript permite regras personalizadas e mensagens mais claras.

Exemplo:

<input type="email" required />

Mesmo assim, você pode complementar com validação em JS para casos específicos.

Resumo da lição

• Validar formulário evita dados incorretos.
• Regras básicas: obrigatório, formato, tamanho mínimo e confirmação.
• No submit, use preventDefault() para validar antes de enviar.
• Mensagens claras aumentam a qualidade da experiência do usuário.
• Validação é uma etapa essencial em qualquer formulário real.