Como Habilitar o Botão de Envio apenas com Inputs Preenchidos Usando JavaScript

Oi pessoal! 💟

Estes dias, peguei um freela no qual o cliente tinha alguns formulários em seu site e queria captar leads de forma mais concisa. Para isso, ele precisava que a pessoa só pudesse clicar no botão de enviar o formulário quando todos os inputs da página estivessem preenchidos.

O site era feito em WordPress e os formulários criados na RD Station eram integrados ao site no WordPress via script.

Para resolver esse problema, optei por usar JavaScript, já que os formulários da RD Station não nos oferecem essa opção na hora de editar o formulário, tive que fazer isso de forma "manual". No WordPress, conseguimos adicionar blocos de código no final da tag body do site quando usamos o editor Elementor (confesso que não sei dizer quanto a outros editores, mas deve haver algum plugin que faça isso), o que facilita minha vida em 100% na hora de fazer esse tipo de coisa.

Vamos criar um cenário aqui para facilitar o entendimento do que eu fiz. O formulário é um HTML, então vamos imaginar algo assim:

<h2>Preencha o formulário</h2>

<form action="#" method="post">
  <label for="name">Nome:</label><br>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-mail:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <label for="phone">Telefone:</label><br>
  <input type="tel" id="phone" name="phone"><br><br>

  <button type="submit" id="button">Enviar formulário</button
</form>

👀 Aqui serei mais direta, mas é super importante lembrarmos de quebrar o problema em partes, pois assim fica mais fácil de resolvermos.

Implementando a lógica 🔍

A primeira coisa que podemos fazer aqui é capturar nosso botão e desabilitá-lo, além de alterar o estilo, deixando-o com uma opacidade menor:

const button = document.getElementById('button');
button.style.opacity = 0.7;
button.disabled = true;

Depois, preciso selecionar os inputs. Há uma forma mais simples de pegar todos pela tag, por exemplo, usando o getElementsByTagName, mas no meu caso, ele estava retornando inputs de toda a página. Então, minha saída foi fazer isso aqui. Como eram apenas 3 inputs, selecionei cada um pelo ID e criei um array de inputs.

const textField = document.getElementById('name');
const emailField = document.getElementById('email');
const phoneField = document.getElementById('phone');

const formFields = [textField, emailField, phoneField]

Agora, vamos criar a função que vai fazer o trem começar a funcionar, como a gente diria na minha terra, MG!

function checkFormFields() {
 let fieldsFilled = true;

  formFields.forEach((field) => {
    if (field.value === '') {
      fieldsFilled = false;
    }
  });

}

Primeiro, criamos a variável fieldsFilled. Essa variável é a responsável por controlar se o input está preenchido ou não. Depois, percorremos nossa lista de inputs fazendo uma verificação: quando o meu input estiver vazio, a minha variável fieldsFilleddeverá ser false.

Agora, precisamos desabilitar e habilitar o nosso botão, dependendo da situação do nosso input.

function checkFormFields() {
  let fieldsFilled = true;

  formFields.forEach((field) => {
    if (field.value === '') {
      fieldsFilled = false;
    }
  });

  if (fieldsFilled) {
    button.removeAttribute('disabled');
    button.style.opacity = 1;
    button.style.cursor = "pointer";
  } else {
    button.disabled = true;
  }
}

Veja bem, agora adicionamos uma condição na nossa função: quando a minha variável fieldsFilled for true, o que significa que meu input foi preenchido, ele remove o atributo disabled, volta o meu button para a opacidade normal dele e muda também o cursor do mouse. Senão, o botão permanece desabilitado até que todos os inputs sejam preenchidos.

Ana, acabou? Não!!

Agora, para finalizar, precisamos disparar esse evento nos nossos inputs, fora da função:

formFields.forEach((field) => {
  field.addEventListener('input', checkFormFields);
});

Feito! Temos um botão desabilitado que será habilitado somente quando todos os campos forem preenchidos