Bom dia pessoal do Brasil!
Vim trazer uma dica importante para quem precisa formatar o input com os pontos de CPF ou CNPJ, espaço e parenteses para números de telefone ou celular (espaço entre o número e o 9) ou o que vocês precisarem realizar! Resolvi fazer um fórum pois quando precisei da ferramenta demorei alguns dias procurando como solucionar o problema.
Estou criando um sistema de gestão para minha empresa e, na hora de cadastrar clientes, estava fazendo falta um input formatado adequadamente para os CPF, CNPJ ou telefones como mencionei anteriormente, após passar por um enorme processo de tentativa e erro, consegui resolver!
Por algum motivo, ao tentar usar os formatadores já prontos em plugin, nenhum funcionava para CPF ou CNPJ. Usei o InputFormatter do Toolbox Plugin ( https://bubble.io/plugin/ultimate-toolkit-1562812673262x109396480465567740 ) e através do cleave.js (site que mostra as expressões em JSON necessárias para formatar da forma que se precisa) peguei o código que era pra funcionar como um formatador de CPF (mas não funciona) e achei um site que “arruma” este código para poder funcionar no formatador. O site é o Json Formatter Validator ( https://jsonformatter.curiousconcept.com/# ). Pelo que entendi, por algum motivo, os códigos colocados no cleave.js não estavam adequadamente espaçados (Sou 100% leigo em programação, portanto não consegui entender o motivo) e, após validados no site acima, funcionaram perfeitamente.
Modifiquei o código customizado do cleave.js até que ficasse exatamente como eu gostaria que ficasse o CPF, CNPJ e os telefones (espaço entre os DDD e o 9 com espaço entre o DDD e o telefone).
Primeiro de tudo, se ainda não acionou, acione a possibilidade de implementar um ID aos elementos do bubble para os plugins poderem funcionar adequadamente. O caminho é em Settings → General → Marcar a caixa de “Expose the option to add ID tribute to HTML elements”:
Após, instale o plugin Ultimate Toolkit (link lá em cima no texto inicial)
Adicione o elemento “inputformatter”:
Coloque um ID no elemento que você quer formatar
Preencha o inputformatter com o ID e o código que você precisa:
Os códigos JSON que usei para formatar meus inputs (Copiar entre os colchetes):
CPF:
{
“delimiters”:[
“.”,
“.”,
“-”
],
“blocks”:[
3,
3,
3,
2
],
“uppercase”:true
}
CNPJ:
{
“delimiters”:[
“.”,
“.”,
“/”,
“-”
],
“blocks”:[
2,
3,
3,
4,
2
],
“uppercase”:true
}
Telefone (com espaçamento entre o DDD e o Número em si)
{
“delimiters”:[
“(”,
“)”,
“\u0020\u0020”,
“-”
],
“blocks”:[
0,
2,
0,
4,
4
],
“uppercase”:true
}
Celular (no formato DDD 9 9999.9999)
{
“delimiters”:[
“(”,
“)”,
“\u0020\u0020”,
“\u0020”,
“-”
],
“blocks”:[
0,
2,
0,
1,
4,
4
],
“uppercase”:true
}
É isto galera! Para quem precisar está ai!. Como ficam os inputs formatados:
Por algum motivo, o plugin formatador não está retornando os values como deveria, não sei se por alguma incompatibilidade com o código ou realmente com alguma situação de atualização do plugin em si, enviei uma mensagem para os criadores mas não obtive resposta. Se preciso, é possivel usar um plugin de validar CPF e CNPJ usando o valor direto do input. Eu uso o CPF/CNPJ VALIDATOR (Curiosamente a página do plugin parece estar indisponível). Funciona perfeitamente o validador, mesmo com os pontos adicionados do input. Espero que este fórum possa ajudar alguém que, como eu, não tem possibilidade de aprender linguagens no momento mas precisa resolver este problema que, apesar de simples, parece bem complicado quando nos deparamos com disfunções dos plugins. Se precisarem modificar para realizar outro tipo de formatação, apenas modifiquem o código ali (ele segue uma lógica que dá pra entender) e coloquem os blocks e os simbolos que precisarem (este simbolo \u0020 representa “espaço” em Json [outra coisa que demorei pra encontrar kk]). O Bubble é uma ferramenta fantástica para quem conseguir entender seu complexo porém acessível funcionamento! Tudo é possível, mesmo que pareça impossível!
Tenham perseverança no aprendizado de vocês! Boa sorte a todos!
