2
respostas

Habitar/Desabilitar botão

Criei um pequeno formulário e gostaria de Habilitar um botão apenas quando os inputs estiverem preenchidos... Como faço?

2 respostas

Na primeira resposta do link abaixo tem um exemplo

https://stackoverflow.com/questions/46917270/javascript-disable-button-until-all-fields-are-filled

No exemplo, ele adiciona um listener para todos os campos input, e utiliza um array temporário para controlar o conteúdo de cada campo.

Quando não existir um elemento vazio no array (ou seja, todos os campos tiverem algum conteúdo), ele libera o botão submit

Boa noite fduduf,

Dê uma olhada nesse código

HTML

<input type="text" id="input">
<button class="button" id="botao" >Enviar</button>

Javascript

//desabilita o botão no início
document.getElementById("botao").disabled = true;

//cria um event listener que escuta mudanças no input
document.getElementById("input").addEventListener("input", function(event){

  //busca conteúdo do input
    var conteudo = document.getElementById("input").value;

    //valida conteudo do input 
    if (conteudo !== null && conteudo !== '') {
      //habilita o botão
      document.getElementById("botao").disabled = false;
    } else {
      //desabilita o botão se o conteúdo do input ficar em branco
      document.getElementById("botao").disabled = true;
    }
});

Você também pode testar aqui no codepen

Abraços

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software