Enviar formulário usando JavaScript

Enviar um formulário HTML com JavaScript geralmente significa tratar o evento submit, verificar os valores inseridos e permitir que o navegador envie os dados válidos para o action do formulário. O exemplo a seguir cria um formulário, lê seus campos e usa validação no lado do cliente para impedir envios incompletos. O servidor ainda precisa fazer a própria validação antes de usar os dados enviados.

Criar formulário HTML

Adicione um name a cada controle; esse valor se torna a chave correspondente nos dados enviados pelo formulário. Use um rótulo para que cada campo tenha um nome acessível. O action identifica a URL que recebe o formulário, enquanto method define como o navegador envia os dados. Uma solicitação POST envia os dados do formulário no corpo da solicitação; cabe ao servidor decidir como processá-los ou armazená-los.

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

Esta marcação de página no navegador é um exemplo estático. Quando o formulário é válido e o usuário aciona o botão de envio, o navegador envia os controles nomeados para /signup.

Acessar o formulário

Selecione o formulário pelo ID com document.getElementById() ou document.querySelector(). O código de navegador a seguir pressupõe que a marcação acima já esteja na página; use a mesma referência form no manipulador de envio apresentado adiante.

const form = document.getElementById("signup-form");

O resultado é o elemento do formulário. Se o script for executado antes de o formulário ser analisado, coloque-o depois do formulário ou aguarde até que o documento esteja pronto.

Obter valores dos campos do formulário em JavaScript

A coleção elements de um formulário permite recuperar controles pelo atributo name. O texto atual de cada controle fica disponível na propriedade .value, no singular. Para o formulário acima, leia o nome e o e-mail assim:

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

Os atributos name no HTML devem corresponder às chaves usadas com form.elements. Remover espaços em branco do início e do fim do texto permite verificar os valores sem esses espaços.

Validar dados dos campos do formulário em JavaScript

A função auxiliar abaixo verifica se os textos dos dois campos contêm algum conteúdo. Ela retorna um valor booleano que um manipulador da página pode usar com os valores lidos do formulário. O objeto de exemplo fornece um nome e um endereço de e-mail, e o programa imprime o resultado para esses valores:

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

O navegador verifica required e type="email" antes de disparar o evento submit do formulário. Um nome vazio ou um e-mail malformado é rejeitado nessa etapa: o listener não é executado, preventDefault() não é chamado e o navegador exibe a própria mensagem de validação. Um nome composto apenas por espaços passa pela verificação required, então o listener abaixo o recebe; após a remoção dos espaços, o valor se torna uma string vazia, a verificação personalizada interrompe o envio com preventDefault() e a página exibe a própria mensagem.

Para um manipulador de página, adicione um listener ao formulário selecionado e use a mesma verificação com os valores atuais:

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

Quando a verificação é aprovada, o manipulador mantém o fluxo normal de envio do formulário pelo navegador. Quando ela falha, event.preventDefault() impede o navegador de enviar o formulário, e a mensagem informa o que corrigir. As mensagens exibidas pelo exemplo estão em inglês. Essa validação no lado do cliente serve para dar feedback ao usuário, mas não é uma barreira de segurança: o endpoint ainda precisa fazer a validação no lado do servidor, pois é possível enviar solicitações sem esta página ou seu JavaScript.

Se outro código precisar iniciar o envio, prefira form.requestSubmit(): esse método segue o fluxo normal de validação e do evento submit. Já form.submit() envia o formulário diretamente, sem executar a validação de restrições nem disparar o evento submit; por isso, um listener como este não será executado.