Enviar formulário usando JavaScript

1. Criar formulário HTML
2. Acesse o Formulário
3. Obtenha valores de campos de formulário em JavaScript
4. Validar dados de campos de formulário em JavaScript

Este tutorial irá apresentar como enviar um formulário usando JavaScript.

Os formulários ajudam a obter dados dos usuários e armazená-los em um banco de dados estruturado. O envio de formulários é um evento importante quando estamos trabalhando com vários aplicativos e sites. Não é tão simples quanto chamar form.submit() ou clicar no botão enviar. Quando o formulário é enviado, o evento de envio é disparado antes que a solicitação seja enviada ao servidor. É aqui que o JavaScript entrará em ação e validará os dados inseridos. Podemos até criar objetos e adicionar vários atributos.

Então, para fazer um envio de formulário, primeiro temos que criar um formulário, acessar o formulário, obter valores de vários campos, validar todos os valores e então clicar no botão enviar / chamar for.submit().

Criar formulário HTML

Podemos criar um formulário HTML usando o elemento <form>.

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

O formulário acima tem dois atributos: action e method.

1. action: especifica a URL que tratará do processo de envio do formulário.
2. method: especifica o método HTTP usado para enviar o formulário. O método post ajuda a armazenar dados em um banco de dados, enviando os dados para o servidor no corpo da solicitação. O método get anexa os dados do formulário a um URL que possui ?.

Acesse o Formulário

Podemos acessar os elementos do formulário usando qualquer um dos seletores de JavaScript, como getElementByTag, getElementById, etc.

let form = document.getElementById('signup-form');

Obtenha valores de campos de formulário em JavaScript

Podemos acessar os campos de entrada no formulário usando a matriz de elementos do formulário ou referenciando o id do campo. Depois de acessar o campo, podemos usar o atributo .values para obter os valores armazenados dentro desse campo. Assim que tivermos adquirido os dados do formulário, podemos validar os dados antes de prosseguirmos com o envio final do formulário.

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

Validar dados de campos de formulário em JavaScript

Adicionamos um ouvinte de evento ao botão de envio e chamamos nosso procedimento de validação antes de passar para a próxima página. Por exemplo: para uma página de inscrição, o usuário deve fornecer o e-mail e a senha.

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

No código acima, escrevemos uma pequena verificação de validação para ver se o campo de entrada está vazio. Em seguida, anexamos um ouvinte de evento ao botão de envio para primeiro processar os dados antes de passá-los para a URL de ação. Certificamo-nos de que o campo de entrada não está vazio e, caso esteja, evitamos o envio do formulário chamando event.preventDefault(). Dessa forma, JavaScript e HTML tratam do envio completo do formulário.