14

Tenho um <button> que é renderizado como disabled(desabilitado) quando a página é carregada incialmente.

Gostaria que ele ficasse enabled(habilitado) quando todos os dados forem preenchidos nos <input>'s. Como poderia fazer isso utilizando o jQuery?

1
  • Importante salientar, em complemento à resposta dada abaixo pelo @Sergio, que seu botão já precisa ser renderizado com disabled aplicado, senão o usuário pode clicá-lo antes de preencher o form. Commented 21/02/2014 às 12:59

5 Respostas 5

13

A resposta fica um pouco geral sem ter código específico na pergunta.

Mas aqui fica uma sugestão:

EDIT: coloco uma versão mais moderna, a versão original está em baixo:

var inputs = $('input').on('keyup', verificarInputs);
function verificarInputs() {
    const preenchidos = inputs.get().every(({value}) => value)
    $('button').prop('disabled', !preenchidos);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />
<input type="text" />
<button type="button" id="botao" disabled="disabled">Botão</button>


Resposta original:

// Mantém os inputs em cache:
var inputs = $('input');

// Chama a função de verificação quando as entradas forem modificadas
// Usei o 'keyup', mas 'change' ou 'keydown' são também eventos úteis aqui
inputs.on('keyup', verificarInputs);

function verificarInputs() {
    var preenchidos = true;  // assumir que estão preenchidos
    inputs.each(function () {
        // verificar um a um e passar a false se algum falhar
        // no lugar do if pode-se usar alguma função de validação, regex ou outros
        if (!this.value) {
          preenchidos = false;
          // parar o loop, evitando que mais inputs sejam verificados sem necessidade
          return false;
        }
    });
    // Habilite, ou não, o <button>, dependendo da variável:
    $('button').prop('disabled', !preenchidos); // 
}

Exemplo

Se fôr preciso uma validação mais avançada recomendo usar o pluging para validações do jQuery

5
  • Obrigado Gustavo Rodrigues pelas sugestões/comentários :)
    – Sergio
    Commented 21/02/2014 às 12:13
  • 3
    Cache, event delegates... Tá tudo aí. Excelente solução de alto nível técnico. Saudações! Commented 21/02/2014 às 12:58
  • +1 Muito boa resposta, eu faria muito similar, mas eu usaria o Array.prototype.every só que teria que explicar pro usuário que em browsers antigos precisa de um shim, variável preenchidos seria o resultado do every. Commented 21/02/2014 às 14:08
  • Teria uma maneira de fazer com select? Commented 22/08/2019 às 12:46
  • Internet não funciona
    – user60252
    Commented 30/07/2020 às 21:30
3

Tente algo assim, por exemplo:

$(document).ready(function (){
    validate();
    $('#nome, #email, #telefone').change(validate);
});

function validate(){
    if ($('#nome').val().length > 0 &&
        $('#email').val().length > 0 &&
        $('#telefone').val().length > 0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}

A validação ocorre quando você tira o foco do campo.

JSFiddle

3
  • Valeu Paulo! Exatamente isso. Commented 21/02/2014 às 12:27
  • 2
    Sua função é dependente da estrutura do formulário... Uma abordagem melhor pode ser vista na resposta do @Sergio, porque é totalmente independente de como o formulário foi construído, além de respeitar cache, etc. Ainda assim, elegante solução. Commented 21/02/2014 às 12:57
  • @TiagoCésarOliveira Perfeito, obrigado pela dica! Commented 21/02/2014 às 13:21
3
//funcao que permite a verificacao atravez de um seletor customizavel    
function isAnyEmpty(el){
    var isEmpty = false, v;
    el.each(function(e){
        v = $(this).val();
        if(v == "" || v == null || v == undefined){
            isEmpty = true
        }
    });
    return isEmpty;
}

Modo de uso:

//use um seletor a sua escolha
var el = $('.meuformulario input[type="text"]');
el.on('keyup',function(){
    $('button').prop('disabled',isAnyEmpty(el));
});

Desta forma você pode reutilizar a função em qualquer bloco de elementos filtrando com seletores, além poder utilizar em conjunto com outros elementos, como textarea por exemplo.

VER FIDDLE

3

Implementei uma solução que funciona com input, textarea e select. Vou iterar os elementos apenas uma vez no page-load, e atribuir os eventos que podem por ventura alterar o valor de um input, textarea ou select: change keyup mouseup.

Script

$(function () {
    // vou pegar apenas os controles que estiverem dentro do form especificamente
    // pois podem haver mais outros forms ou controles em outros locais, os quais
    // não desejo afetar
    var $inputs = $("input, textarea, select", "#formName"),
        $button = $("#botao");

    var limpos = 0;

    // contagem inicial de valores não preenchidos
    $inputs.each(function () {
        var $this = $(this);
        var val = $this.val();
        val || limpos++;
        $this.data("val-antigo", val);
    });

    $button.prop("disabled", !!limpos);

    // agora só vamos ouvir eventos específicos, e alterar a quantidade de limpos
    // quando um valor for alterado... não vamos mais iterar pelos controles
    $inputs.on("change keyup mouseup", function () {
        var $this = $(this);
        var val = $this.val();
        limpos += (val ? 0 : 1) - ($this.data("val-antigo") ? 0 : 1);
        $this.data("val-antigo", val);
        $button.prop("disabled", !!limpos);
    });
});

Exemplo no jsfiddle

0

Alternativa com JavaScript puro

Formulário HTML:

<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>

Você pode adicionar quantos campos quiser, apenas coloquei dois para o exemplo.

Agora o código JavaScript necessário:

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 de algum input, ainda fazemos a checagem e se necessário alteramos o input para disabled novamente

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .