1

Estou tentando fazer uma validação de campos utilizando o método Array.prototype.filter(), mas não parece surtir efeito:

<script>
    function isEmpty() {
        document.getElementById("submit").disabled = 
            Array.prototype.filter.call(
                Array.prototype.slice.call(
                    document.getElementsByClassName("input")),
                        function(input) {
                            input.value != "";
                        });
    }
</script>
<form>
    <input class="input" onkeydown="isEmpty()" onkeyup="isEmpty()">
    <input class="input" onkeydown="isEmpty()" onkeyup="isEmpty()">
    <input class="input" onkeydown="isEmpty()" onkeyup="isEmpty()">
    <input class="input" onkeydown="isEmpty()" onkeyup="isEmpty()">
    <button id="submit" disabled>
</form>

O que era para ocorrer, é o botão ficar habilitado apenas quando todos os campos estiverem preenchidos, mas não é o que acontece.

2 Respostas 2

2

Três coisas que deves mudar no teu código:

#1 - o método filter tem de ter dentro da função callback um return. Ou seja em vez de somente input.value != ""; deves ter return input.value != "";

#2 - quando usas o método filter tens de ler a propriedade .length para saber se há valores dentro do resultado. Como o hugomg referiu uma array vazia valida como true, então deves usar .length para saber se a array de facto está vazia.

#3 - quando usas Array.prototype.filter.call(lista, callback); já não precisas de usar o .slice. Podes remover essa linha.

Assim o código corrigido e mais organizado poderia ser assim:

function isEmpty() {
    var submit = document.getElementById("submit");
    var inputs = document.getElementsByClassName("input");
    var empty =  Array.prototype.filter.call(inputs, function (input) {
        return input.value.trim() == "";
    });
    submit.disabled = !!empty.length;
}

jsFiddle: http://jsfiddle.net/c0vy3fgc/

2
  • Sobre o return, eu esqueci de colocar aqui na postagem. Já o .slice, não seria necessário, já que o getElementsByClassName retorna um array-like e o .filter trabalha com arrays?
    – ptkato
    Commented 16/10/2015 às 14:15
  • @Patrick o Array.prototype.filter vai tratar essa lista de nós do DOM como uma array e daí o slice não ser necessário.
    – Sergio
    Commented 16/10/2015 às 15:11
2

O método filter retorna uma lista e listas em Javascript sempre contam como "verdadeiro" em um contexto booleano (inclusive a lsita vazia).

if( [] ){
    console.log("Olá!");
}else{
    connsole.log("Esse else nunca roda");
}

No entanto, acho que o método every se encaixa melhor no que você quer fazer do que o filter.

3
  • Uai, mas [] == false não dá true?
    – ptkato
    Commented 16/10/2015 às 1:25
  • Nunca confie no operador de == de Javascript :) Ele faz umas conversões de tipos bem malucas e quase sempre é melhor usar o === ao invés dele.
    – hugomg
    Commented 16/10/2015 às 1:36
  • Coloquei o every, porém agora ele habilita o botão a primeira entrada e mesmo que eu apague, continua habilitado. Será que é algum problema com o slice ou getElementsByClassName?
    – ptkato
    Commented 16/10/2015 às 1:38

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 .