Formulários são a principal forma de coleta de dados do usuário na web. Com JavaScript, podemos ler, validar e enviar esses dados de forma dinâmica, melhorando a experiência do usuário e garantindo a integridade das informações. Nesta aula, abordaremos as técnicas essenciais para trabalhar com formulários: desde a leitura de valores de campos até o uso moderno do objeto FormData.

Dominar essas habilidades é fundamental para criar aplicações web interativas e responsivas. Você verá como prevenir o envio padrão, validar entradas e enviar dados assincronamente via AJAX.

Lendo valores

Para ler valores de campos de formulário, podemos acessar o elemento do campo e sua propriedade value. Isso funciona para inputs de texto, textarea, selects e outros. É importante considerar o momento da leitura: geralmente, queremos ler os valores quando um evento ocorre, como um clique ou mudança.

Exemplo: suponha um formulário com campos de nome e email. Podemos ler seus valores assim:

const nomeInput = document.getElementById('nome');
const emailInput = document.getElementById('email');

function lerValores() {
  const nome = nomeInput.value;
  const email = emailInput.value;
  console.log('Nome:', nome, 'Email:', email);
}

Para selects, a propriedade value retorna o valor da opção selecionada. Para checkboxes e radios, usamos checked para saber se estão marcados e value para obter o valor associado. Exemplo com checkbox:

const aceitoInput = document.getElementById('aceito');
if (aceitoInput.checked) {
  console.log('Aceito:', aceitoInput.value);
}

Validação

A validação de formulários pode ser feita de dois modos: validação nativa do HTML5 (atributos como required, pattern, minlength) e validação customizada com JavaScript. A validação nativa é exibida automaticamente pelo navegador, mas pode ser personalizada ou complementada com JavaScript.

Com JavaScript, podemos verificar campos antes do envio, exibir mensagens de erro personalizadas e impedir o envio se houver erros. Exemplo de validação de email:

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

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
  if (!validarEmail(this.value)) {
    this.classList.add('is-invalid');
    // exibir mensagem de erro
  } else {
    this.classList.remove('is-invalid');
  }
});

Podemos também utilizar a API de Validação de Restrições (HTMLFormElement.elements e checkValidity()). Exemplo:

const form = document.getElementById('meuForm');
if (form.checkValidity() === false) {
  // exibir erros
} else {
  // enviar
}

Evento submit

O evento submit é disparado quando o formulário é enviado. Para controlar o envio, adicionamos um listener e chamamos event.preventDefault() para evitar o recarregamento da página. Isso permite que enviemos os dados via AJAX ou realizemos validações antes do envio.

Exemplo básico:

const form = document.getElementById('meuForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  // ler dados e enviar
  const formData = new FormData(form);
  // enviar com fetch
});

É importante lembrar que o evento submit também pode ser acionado por JavaScript (form.submit()), mas nesse caso o evento não é disparado. Portanto, sempre use o listener para capturar envios.

FormData

O objeto FormData é uma interface que permite construir facilmente um conjunto de pares chave/valor representando campos de formulário e seus valores. Ele é especialmente útil para enviar dados via AJAX, pois pode ser passado diretamente para o método fetch ou XMLHttpRequest.

Criando um FormData a partir de um formulário existente:

const form = document.getElementById('meuForm');
const formData = new FormData(form);

// Acessar valores
const nome = formData.get('nome');
const email = formData.get('email');

// Iterar sobre todos os campos
for (let [key, value] of formData.entries()) {
  console.log(key, value);
}

Também podemos adicionar dados manualmente:

formData.append('chave', 'valor');
formData.set('chave', 'novo valor'); // substitui se existir
formData.delete('chave');

Para enviar com fetch:

fetch('/api/enviar', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data));

Note que o FormData define automaticamente o cabeçalho Content-Type como multipart/form-data.

Boas Práticas

  • Sempre valide tanto no cliente quanto no servidor.
  • Use type adequado nos inputs (email, number, etc.) para aproveitar validação nativa.
  • Forneça feedback visual imediato ao usuário.
  • Evite enviar formulários com campos vazios ou inválidos.
  • Prefira o uso de FormData para envio de formulários complexos ou com arquivos.

Referências

Exercícios

  1. Crie um formulário com campos de nome e email. Ao clicar em um botão, leia os valores e exiba em um alerta.

    ✓ Resposta: HTML: <form id="form1"> Nome: <input type="text" id="nome1"> Email: <input type="email" id="email1"> <button type="button" id="btn1">Mostrar</button> </form> JavaScript: const btn = document.getElementById('btn1'); btn.addEventListener('click', function() { const nome = document.getElementById('nome1').value; const email = document.getElementById('email1').value; alert(`Nome: ${nome}, Email: ${email}`); });

  2. Adicione validação customizada ao campo de email: deve conter '@' e um domínio. Exiba uma mensagem de erro se inválido.

    ✓ Resposta: const emailInput = document.getElementById('email1'); const errorSpan = document.createElement('span'); errorSpan.style.color = 'red'; emailInput.parentNode.appendChild(errorSpan); emailInput.addEventListener('blur', function() { const value = this.value; if (!value.includes('@') || !value.includes('.')) { errorSpan.textContent = 'Email inválido'; } else { errorSpan.textContent = ''; } });

  3. Capture o evento submit de um formulário e evite o envio padrão. Exiba no console os dados do formulário usando FormData.

    ✓ Resposta: const form = document.getElementById('form1'); form.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(form); for (let [key, value] of formData.entries()) { console.log(key, value); } });

  4. Utilizando FormData, envie os dados de um formulário para uma URL fictícia via fetch. Simule uma resposta de sucesso.

    ✓ Resposta: form.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(form); fetch('https://httpbin.org/post', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log('Sucesso:', data)) .catch(error => console.error('Erro:', error)); });

  5. Crie um formulário que inclua um campo de arquivo (input type file). Ao enviar, use FormData e exiba o nome do arquivo no console.

    ✓ Resposta: HTML: <form id="formFile"> <input type="file" id="arquivo" name="arquivo"> <button type="submit">Enviar</button> </form> JavaScript: const formFile = document.getElementById('formFile'); formFile.addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(formFile); const file = formData.get('arquivo'); console.log('Nome do arquivo:', file.name); });