JavaScript

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

17 de novembro de 2020

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

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

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

Subscribe
Notify of
guest
3 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rogerio

Olá como uso essa mesma função em um formulario de etapas, tentei colocar esse codigo no final do meu script, mais o botão de proximo ficou desativado mesmo preenchendo os campos 🙁

Suzana

Valeeeu!!! Ajudou muito!

Battisti

show Suzana!

3
0
Would love your thoughts, please comment.x