1

Estou usando o chips do materialize no meu projeto, mas queria evitar esse comportamento padrão de adicionar a tag mesmo vazia, por exemplo:

inserir a descrição da imagem aqui

Como faço para impedir isto e inserir a tag somente quando tiver pelo menos um caractere?

O que cheguei mais próximo foi:

$('.chips').on('chip.add', function(e, chip){
        console.log(chip);

        var chip = chip.tag;

        if(!chip.trim()){
           alert('CHIP VAZIO!');
           //aqui gostaria de fazer algo do tipo chip.remove() porém da erro
        }
    });
6
  • Amigo coloca no mínimo a versão do Materialize que está usado e o seu HTML, só com a imagem não da para te ajudar muito
    – hugocsl
    Commented 11/12/2018 às 17:13
  • @hugocsl esse exemplo é do próprio materialize.
    – user133681
    Commented 11/12/2018 às 17:14
  • O Materialize tem muitas "falhas", pontas soltas que não foram amarradas - não sei dizer se por falta de desconhecimento ou se era objetivo deles mesmo. Parece que foi feita às pressas e de forma que ficasse visivelmente agradável. Nas options do seu elemento, existe a propriedade onChipAdd. Tente utilizá-la para validar o valor adicionado.
    – Woss
    Commented 11/12/2018 às 17:24
  • Na página da documentação tem o JS, eu não manjo muito, mas acredito que alguém mais experiente vai saber te ajudar materializecss.com/chips.html no final da página te os scrpts...
    – hugocsl
    Commented 11/12/2018 às 17:28
  • vou pesquisar melhor..
    – user133681
    Commented 11/12/2018 às 17:35

1 Resposta 1

1

Verifique se o nó de texto do chip está vazio utilizando o método .trim(). Se apenas espaços forem digitados, o trim() irá eliminá-los e tornará null o chip.

Para isso você utiliza o callback do método onChipAdd:

$('.chips').chips({
    onChipAdd: function(e, c){
      if(!c.firstChild.textContent.trim()) c.remove();
    }
});

O segundo parâmetro (c) retorna o HTML do chip criado. O primeiro nó (firstChild) é o texto. Se for vazio remova-o com .remove().

Teste:

$('.chips').chips({
    onChipAdd: function(e, c){
      if(!c.firstChild.textContent.trim()) c.remove();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="chips">
   <input class="custom-class" placeholder="Digite as tags">
</div>

9
  • Fiz conforme você falou, porém da esse erro: Cannot read property 'textContent' of undefined
    – user133681
    Commented 12/12/2018 às 12:01
  • Estou fazendo assim: $('.chips').on('chip.add', function(e, c){ if(!c.firstChild.textContent.trim()) c.remove(); });
    – user133681
    Commented 12/12/2018 às 12:02
  • Não sei se a versão do materialize influencia, pq quando faço $('.chips').chips({)}; não reconhece...
    – user133681
    Commented 12/12/2018 às 12:02
  • Do jeito que vc está fazendo está entrando no console.log(chip);?
    – Sam
    Commented 12/12/2018 às 12:13
  • Sim, me retorna dessa maneira: {tag: "ksdsd"}
    – user133681
    Commented 12/12/2018 às 12:14

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 .