Validação de cpf/cnpj com mascará

[msaulohenrique]

Olá nobres colegas..

Venho compartilhar uma solução para quem deseja implantar o campo de CPF e CNPJ ao seu WHMCS. Algo simples mas que exige um pouco de compreensão de HTML e JS, e conhecer um pouco do sistema de template do WHMCS.

Vamos lá:

1. Baixem o seguinte arquivo e upem na pasta /templates/seu-tema/js do WHMCS: jquery.cpnjcpf.zip
2. Acesse o ADMIN do seu WHMCS, e vá em Opções > Campos Personalizados, crie o seguinte campo: 
3. Agora, crie um usuário de testes. Acesse o perfil e verifique a ID do input referente ao campo: 
4. Veja que o ID refente ao campo que criei é customfield15, usaremos ele mais para frentes, agora vamos obter o class do botão que tem a função de enviar os dados, prossiga da mesma forma:  
5. Obtivemos o seguinte do botão: btn btn-primary. Usaremos o btn-primary, pois é a class que diferencia dos demais botões do mesmo formulário.
6. Usaremos o template SIX nesse tutorial. Vá em templates/six/footer.tpl e insira o código abaixo antes de <script src="{$BASE_PATH_JS}/bootstrap.min.js"></script>

7.   <!-- Modal CPF/CNPJ -->
     <div class="modal fade" id="cpfcnpj-error" role="dialog">
       <div class="modal-dialog">
       
         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-body">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
             <div class="alert alert-danger">
               <strong>Atenção!</strong> O CPF/CNPJ informado é inválido.
             </div>
           </div>
         </div>
         
       </div>
     </div>
     <!-- Modal CPF/CNPJ -->
   
     <style>
           .error { border-color: #F70202 }
           .success { border-color: GREEN}
       </style>
       <script type="text/javascript">
       $("#customfield15").after("<span class='btn btn-block btn-xs btn-primary btn-cpfcnpj'>VERIFICAR</span>");
           $(document).ready(function () {
               $('#customfield15').cpfcnpj({
                   mask: false,
                   validate: 'cpfcnpj',
                   event: 'click',
                   handler: '.btn-cpfcnpj',
                   ifValid: function (input) { input.removeClass("error").addClass("success"); },
                   ifInvalid: function (input) { input.removeClass("success").addClass("error"); $("#cpfcnpj-error").modal("show");}
               });
           });
   $("#customfield15").keydown(function(){
       try {
       	$("#customfield15").unmask();
       } catch (e) {}
       
       var tamanho = $("#customfield15").val().length;
   	
       if(tamanho < 11){
           $("#customfield15").mask("999.999.999-99");
       } else if(tamanho >= 11){
           $("#customfield15").mask("99.999.999/9999-99");
       }                   
   });
       </script>
   
   <script src="{$WEB_ROOT}/templates/{$template}/js/jquery.cpfcnpj.js"></script>
   <script src="{$WEB_ROOT}/templates/{$template}/js/jquery.mask.min.js"></script>

    

8. Veja que no código, aonde tem customfield15, deve ser alterado pelo valor da sua input que representa o CPF/CNPJ, e aonde tem btn-primary, vc altera pela class respectiva ao botão de envio de dados.
9. Pronto, espero ter ajudado.

Demonstração:

Edited October 25, 2018 by msaulohenrique
Atualizar dados

[DELTA SERVERS]

Olá, boa tarde!

Obrigado, agora não entendi a questão de baixar o arquivo, não vejo ele para baixar

[msaulohenrique]

1 minuto atrás, DELTA SERVERS disse:

Olá, boa tarde!

Obrigado, agora não entendi a questão de baixar o arquivo, não vejo ele para baixar

Perdão, a energia caiu e dai deu erro. Upando as imgs e demais.

[Joel Emanoel]

Opa legal, irei testar depois, obrigado por compartilhar!

[RevendaHost]

Aqui não funcionou a validação.

[msaulohenrique]

3 horas atrás, RevendaHost disse:

Aqui não funcionou a validação.

Na realidade o só o campo ira ficar vermelho, informando que não é válido o CPF/CNPJ, nem tem o intuito de barra cadastro. Algo mais complexo, recomendo comprar o modulo do @edvan. 

[Paulinha]

Ola .. boa noite.. por acaso tu terias para telefone tb?  Preciso arrumar uma mascara para o gerencianet, O seu do CNPJ e CPF funcionou direitinho queria fazer para o telefone tb.. tens como me ajudar?  Valeu .. obrigada

@msaulohenrique Obrigada pela tua ajuda.. ME quebrou um galhão.. teria como adaptar nesse teu mesmo script uma mascara para telefone??  Valeu.. muito obrigada ! Abraço.

[TiagoSouza]

@Paulinha

Respondi sua pergunta neste outro tópico aqui do fórum, chegou a ver?

Abraços,

[msaulohenrique]

Em 17/08/2016 at 19:33, Paulinha disse:

Ola .. boa noite.. por acaso tu terias para telefone tb?  Preciso arrumar uma mascara para o gerencianet, O seu do CNPJ e CPF funcionou direitinho queria fazer para o telefone tb.. tens como me ajudar?  Valeu .. obrigada

@msaulohenrique Obrigada pela tua ajuda.. ME quebrou um galhão.. teria como adaptar nesse teu mesmo script uma mascara para telefone??  Valeu.. muito obrigada ! Abraço.

Só adicionar o seguinte código antes da tag </script>

$("#phonenumber").keydown(function(){
    try {
    	$("#phonenumber").unmask();
    } catch (e) {}
    
    var tamanho = $("#phonenumber").val().length;
	
    if(tamanho < 10){
        $("#phonenumber").mask("(00) 0000-0000");
    } else if(tamanho >= 11){
        $("#phonenumber").mask("(00) 00000-0000");
    }                   
});

 

[Paulinha]

21 horas atrás, msaulohenrique disse:

Só adicionar o seguinte código antes da tag </script>

$("#phonenumber").keydown(function(){
    try {
    	$("#phonenumber").unmask();
    } catch (e) {}
    
    var tamanho = $("#phonenumber").val().length;
	
    if(tamanho < 10){
        $("#phonenumber").mask("(00) 0000-0000");
    } else if(tamanho >= 11){
        $("#phonenumber").mask("(00) 00000-0000");
    }                   
});

 

Valeu .. muito Obrigada.. Na verdade era um problema de compatibilidade da mascara com GerenciaNet...Eles atualizaram dai  ele funcionou certinho com esse codigo  que tu me passou!! Tudo resolvido!!!  
Obrigada por tua ajuda !!! Valeu mesmo! 

Abração

Paulinha!!!