Como habilitar um botão apenas quando os inputs estiverem preenchidos

Neste artigo você vai aprender a como habilitar um botão apenas quando os inputs estiverem preenchidos, possibilitando o envio do formulário

Fala programador(a), beleza? Bora aprende a como habilitar o envio do form somente com todos os campos preenchidos

Primeiramente vamos criar o nosso formulário com HTML, veja código de exemplo:

<form action="" id="form">
  <input type="text" placeholder="Digite seu nome">
  <input type="text" placeholder="Digite seu sobrenome">
  <button type="submit" disabled="disabled">Enviar</button>
</form>

Aqui teremos apenas dois campos, mas você pode ter quantos precisar para a sua regra de negócios

É importante também citar que o button começa com o atributo de disabled, não habilitando o envio do formulário

Agora vamos ao código de JavaScript:

function checkInputs(inputs) {

  var filled = true;
  
  inputs.forEach(function(input) {
  	
    if(input.value === "") {
    	filled = false;
    }
  
  });
  
  return filled;
  
}

var inputs = document.querySelectorAll("input");
var button = document.querySelector("button");

inputs.forEach(function(input) {
    
  input.addEventListener("keyup", function() {

    if(checkInputs(inputs)) {
      button.disabled = false;
    } else {
      button.disabled = true;
    }

  });

});

Primeiramente temos a função checkInput, que vai realizar um loop em cada um dos inputs e verificar se o valor está preenchido

Caso algum deles esteja, a variável filled fica setada como false, fazendo com que o retorno seja falso e isso determina que o formulário não está completamente preenchido

Depois temos um evento em cada um dos inputs, que é ativado com o keyup

Neste evento vamos realizar o disparo da função a cada tecla digitada, para verificar se liberamos o formulário ou não

E se os campos estiverem preenchidos vamos mudar o valor do atributo disabled para false

Caso o usuário volte a remover dados do input, ainda fazemos a checagem e se necessário alteramos o input para disabled novamente

Conclusão

Neste artigo vimos como habilitar um botão apenas quando os inputs estiverem preenchidos

Criamos uma função que checa o valor do input, e retorna verdadeiro ou falso, depende se todos os campos estão preenchidos ou não

Com a resposta deste retorno controlamos o atributo disabled do nosso input de formulário, para permitirmos o usuário enviar ou não o mesmo

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube