Formulários em JavaScript: Validação, Submissão e FormData: Do Básico ao Avançado Já leu

Validação de Formulários com JavaScript

A validação de formulários é a primeira barreira entre dados inválidos e seu banco de dados. Existem duas abordagens: validação HTML5 nativa e validação JavaScript customizada. A validação HTML5 oferece feedback instantâneo com atributos como required, type="email" e pattern, mas é limitada. A validação em JavaScript oferece controle total e mensagens personalizadas.

Comece sempre com HTML5 para criar a camada inicial de proteção, depois reforce com JavaScript no lado do cliente:

<form id="formulario">
  <input type="text" id="nome" name="nome" required minlength="3">
  <input type="email" id="email" name="email" required>
  <input type="password" id="senha" name="senha" required minlength="8">
  <button type="submit">Enviar</button>
</form>

Agora, implemente validações customizadas em JavaScript:

const form = document.getElementById('formulario');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const nome = document.getElementById('nome').value.trim();
  const email = document.getElementById('email').value.trim();
  const senha = document.getElementById('senha').value;

  let erros = [];

  if (nome.length < 3) {
    erros.push('Nome deve ter pelo menos 3 caracteres');
  }

  if (!validarEmail(email)) {
    erros.push('Email inválido');
  }

  if (senha.length < 8) {
    erros.push('Senha deve ter no mínimo 8 caracteres');
  }

  if (erros.length > 0) {
    mostrarErros(erros);
    return;
  }

  console.log('Formulário válido!');
});

function validarEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

function mostrarErros(erros) {
  const div = document.getElementById('erros') || 
              document.createElement('div');
  div.id = 'erros';
  div.style.color = 'red';
  div.innerHTML = '<ul>' + 
    erros.map(e => `<li>${e}</li>`).join('') + 
    '</ul>';
  form.parentNode.insertBefore(div, form);
}

Submissão de Formulários

A submissão adequada envolve mais que apenas disparar um evento — requer feedback ao usuário, prevenção de duplo envio e tratamento de respostas do servidor. O método tradicional é usar fetch() ou XMLHttpRequest, mas fetch() é mais moderno e limpo.

O fluxo ideal é: validar → desabilitar botão → enviar → aguardar resposta → restaurar estado:

const form = document.getElementById('formulario');
const botao = form.querySelector('button[type="submit"]');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  if (!validarFormulario(form)) {
    return;
  }

  botao.disabled = true;
  botao.textContent = 'Enviando...';

  try {
    const formData = new FormData(form);

    const resposta = await fetch('/api/usuario', {
      method: 'POST',
      body: formData
    });

    if (resposta.ok) {
      const dados = await resposta.json();
      alert('Enviado com sucesso!');
      form.reset();
    } else {
      alert('Erro na submissão. Tente novamente.');
    }
  } catch (erro) {
    console.error('Erro:', erro);
    alert('Erro de conexão');
  } finally {
    botao.disabled = false;
    botao.textContent = 'Enviar';
  }
});

function validarFormulario(form) {
  return form.checkValidity() === true;
}

FormData: Manipulação Avançada

FormData é uma API nativa que captura dados de formulários incluindo arquivos. É especialmente útil para uploads e envios complexos. Em vez de construir manualmente strings de dados, FormData manipula automaticamente serialização e encoding.

<form id="formulario" enctype="multipart/form-data">
  <input type="text" name="nome" required>
  <input type="email" name="email" required>
  <input type="file" name="avatar">
  <textarea name="bio"></textarea>
  <button type="submit">Enviar</button>
</form>

const form = document.getElementById('formulario');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // FormData captura todos os campos automaticamente
  const formData = new FormData(form);

  // Adicione dados extras se necessário
  formData.append('timestamp', new Date().toISOString());

  // Verifique os dados antes de enviar (útil para debug)
  for (let [chave, valor] of formData.entries()) {
    console.log(`${chave}: ${valor}`);
  }

  try {
    const resposta = await fetch('/api/perfil', {
      method: 'POST',
      body: formData
      // Não defina Content-Type — o navegador faz automaticamente
    });

    const resultado = await resposta.json();
    console.log('Sucesso:', resultado);
  } catch (erro) {
    console.error('Erro:', erro);
  }
});

Validação com FormData

Para validações complexas, combine FormData com regras customizadas:

function validarComFormData(formData) {
  const erros = [];

  // Validar nome
  const nome = formData.get('nome');
  if (!nome || nome.trim().length < 3) {
    erros.push('Nome inválido');
  }

  // Validar arquivo (se existir)
  const arquivo = formData.get('avatar');
  if (arquivo && arquivo.size > 5242880) { // 5MB
    erros.push('Arquivo muito grande');
  }

  return erros.length === 0 ? true : erros;
}

// No evento submit:
const validacao = validarComFormData(formData);
if (validacao !== true) {
  console.log('Erros:', validacao);
  return;
}

Conclusão

Dominar validação de formulários em JavaScript envolve três pilares: validação robuusta no cliente (HTML5 + JavaScript customizado), submissão controlada com feedback ao usuário e prevenção de duplo envio, e FormData como ferramenta moderna para capturar e enviar dados complexos incluindo arquivos. Sempre valide também no servidor — nunca confie apenas em validações do cliente. A combinação dessas técnicas resulta em formulários seguros, responsivos e profissionais.

Referências

• MDN Web Docs - FormData API
• MDN Web Docs - Form Validation
• JavaScript.info - Fetch API
• W3C - HTML Form Submission
• Web.dev - Sign-up Form Best Practices