CPF ou CNPF com Máscara
Boa tarde!:) Estou confusa quanto a uma determinada função aqui. Seguinte: tenho em um formulário um campo chamado "CPF ou CNPJ". Ou seja, o campo deve identificar pela quantidade de numeros se é CPF ou CNPF e autocompletar os "." e os "-". Pra ajudar, eu já ahvia utilizado outra função Jquery para manter os input's do form preenchidos. Já achei diversos scripts na web, mas nenhum me ajudou o suficiente. Alguem me dá uma luz? Obrigada! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Pagamento</title> <link rel="stylesheet" href="style.css" media="screen" /> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/jquery-fix.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script> $( document ).ready(function() { $( "#link-novoendereco" ).click(function() { $('#form-novoendereco').show("slow"). }). $( "#cancelarendereco" ).click(function() { $('#form-novoendereco').hide(1000). }). }). </script>
<script>
function pagamento(codigo){ switch(codigo) { case 0: // Muda HTML do DIV, toda linha termina com \ para pular linha. Não remova as barra invertida do final // Se necessário adicionar mais linhas coloque a \ no final da linha, se der um espaço entre linhas coloque a \ na linha // Usado aspas simples no html para não dar erro concatenação com o conteúdo HTML em aspas duplas
$('#form-pagamento').html('<div class="divcc cinza"> \ <br> \ <label>Parcelamento<br><select style="float:left. " class="cinza" id="parcelamento-visa" name="parcelamento-master"><option size="5" value="12x sem juros">3x sem juros de R$ 145,00</option><option value="a vista">a vista</option></select><br></label> \ <label style="line-height:15px. ">Nome do proprietário do cartão<p> (como impresso no cartão)</p></label><br>\ <input class="cinza" type="text" id="proprietario" name="proprietario" autocomplete="off" size="40" maxlength="4" value=""> <br>\ <label>Número do Cartão de Crédito</label> \ <label style="width: 154px. ">Código de Segurança</label> \ <input class="cinza" type="text" id="num_cartao" name="num_cartao" autocomplete="off" size="40" maxlength="4" value=""> \ <input style="margin-left:10px. " class="cinza" type="text" id="codigo" name="codigo" autocomplete="off" size="30" maxlength="4" value=""> <br>\ <label>Validade</label> \ <label style="float:right. width: 154px. margin-top: -5px. "><a href="#"><strong style=". ">O que é isso?</strong></a></label> \ <div style="clear:left. "></div>\ <select class="cinza" id="cartao_mes" name="cartao_mes" style="width: 105px. "><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> \ <select style="margin-left:10px. margin-bottom:10px. width: 110px. " class="cinza" id="cartao_ano" name="cartao_ano"><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option><option value="2029">2029</option><option value="2030">2030</option><option value="2031">2031</option><option value="2032">2032</option><option value="2033">2033</option><option value="2034">2034</option></select><br> \ <div style="clear:both. "></div>\ <br><br><img style="float:left. " src="imagens/calendario.jpg"><p style="width:366px. float:left. " class="cinza">A retirada do certificado poderá ser agendada em um dos postos de atendimento no prazo de até 2 horas após o pagamento.</p>\ </div> \ '). $('#cardnumber').focus(). break. case 1: $('#form-pagamento').html('<div class="divcc cinza"> \ <br> \ <label>Parcelamento<br><select style="float:left. " class="cinza" id="parcelamento-visa" name="parcelamento-master"><option size="5" value="12x sem juros">3x sem juros de R$ 145,00</option><option value="a vista">a vista</option></select><br></label> \ <label style="line-height:15px. ">Nome do proprietário do cartão<p> (como impresso no cartão)</p></label><br>\ <input class="cinza" type="text" id="proprietario" name="proprietario" autocomplete="off" size="40" maxlength="4" value=""> <br>\ <label>Número do Cartão de Crédito</label> \ <label style="width: 154px. ">Código de Segurança</label> \ <input class="cinza" type="text" id="num_cartao" name="num_cartao" autocomplete="off" size="40" maxlength="4" value=""> \ <input style="margin-left:10px. " class="cinza" type="text" id="codigo" name="codigo" autocomplete="off" size="30" maxlength="4" value=""> <br>\ <label>Validade</label> \ <label style="float:right. width: 154px. margin-top: -5px. "><a href="#"><strong style=". ">O que é isso?</strong></a></label> \ <div style="clear:left. "></div>\ <select class="cinza" id="cartao_mes" name="cartao_mes" style="width: 105px. "><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> \ <select style="margin-left:10px. margin-bottom:10px. width: 110px. " class="cinza" id="cartao_ano" name="cartao_ano"><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option><option value="2029">2029</option><option value="2030">2030</option><option value="2031">2031</option><option value="2032">2032</option><option value="2033">2033</option><option value="2034">2034</option></select><br> \ <div style="clear:both. "></div>\ <br><br><img style="float:left. " src="imagens/calendario.jpg"><p style="width:366px. float:left. " class="cinza">A retirada do certificado poderá ser agendada em um dos postos de atendimento no prazo de até 2 horas após o pagamento.</p>\ </div> \ '). $('#cardnumber').focus(). break. case 2: $('#form-pagamento').html('<div style="margin-left: 92px. margin-top: 20px. text-align: center. " class="cinza"><br>Seu Boleto será emitido no próximo passo.</div>'). break. case 3: $('#form-novoendereco').html('<div> \ '). break. }
}function finalizar_compra()
{ // Define o retorno como verdadeiro
var libera = 1. if( $('#cartao_numero').length!=0 ) { if( $('#cartao_numero').val().length == 0) { $('#cartao_numero').addClass('campo_invalido'). } else { $('#cartao_numero').removeClass('campo_invalido'). } } if( $('#termos').length!=0 ) { if (!$('#termos').is(':checked') ) { libera = 0. $('#termos').addClass('campo_invalido'). }else { libera = 1. $('#termos').removeClass('campo_invalido'). } } // Se passar em todas as checagens retorna verdadeiro return libera. }$( document ).ready(function() { // Define o primeiro formulario como 0 e clica no Master, se não não aparece nada na bagaça! pagamento(0) $("#master").prop('checked', true). // Verifica se foi clicado no botão Finalizar e chama a função correspondente $("#finalizar").click(function(){ if(finalizar_compra()) { // remove o aviso e chama o próximo passo $('#aviso').hide(1000). $( "#principal" ).submit(). } else { // Mostra o aviso. $('#aviso').show("slow"). } }). }). </script> </head> <body> <div id="center" class="central"> <div class="topo_logo"> <a href="[http://www.serasaexperian.com.br/](http://www.serasaexperian.com.br/)"><img src="imagens/logo_serasa_experian.jpg"></a> <div style="border-right:1px solid #ccc. height:60px. width:2px. float:left. margin: 10px. "></div> <a href="[http://serasa.certificadodigital.com.br/](http://serasa.certificadodigital.com.br/)"><img src="imagens/logo_certificados_digitais.jpg" border=0></a> </div> <div class="topo_carrinho"> <div class="titulo_carrinho alinha"> Pagamento </div> <div class="nav position_pagto"> <div class="texto_nav" style="text-align: left.. "> 1.Carrinho </div> <div class="texto_nav" style="text-align: left. padding-left: 8px. "> 2.Cadastro </div> <div class="texto_nav" style="text-align: left. padding-left: 2px. "> 3.Pagamento </div> <div class="texto_nav"> <span>4.Agendamento</span> </div> </div> </div> <div id="box"> <div class="box_pagto"> <div class="tit_pagto"> Forma de pagamento </div> <div id="formas"> <div class="formas" style="float:left. "><strong> Cartões de crédito </strong></div> <div class="formas" style="float:right. margin-right: 34px. "><strong> Boleto bancário </strong></div> <div class="bandeiras"> <form id="principal" method="post" action="agendamento.html"> <input type="radio" id="master" value="master" onclick="JAVASCRIPT:pagamento(0). " name="forma-pagamento" /> <img src="imagens/master.png" /> <input type="radio" id="visa" value="visa" onclick="JAVASCRIPT:pagamento(1). " name="forma-pagamento" /> <img src="imagens/visa.png" /> <input type="radio" id="boleto" value='boleto' onclick="JAVASCRIPT:pagamento(2). " name="forma-pagamento" /> <img src="imagens/boleto.png" /> </form> </div> <!-- CSL - Let's go to the first fucking form of this bullshit! aaIUHauihAUa--> <div id="form-pagamento"> </div> <div id="aviso" style="display:none. width:100%. font-weight:bold. text-align:center. color:red. "> <p> Por favor, preencha os campos em vermelho obrigatórios. </p> </div> <div style="clear:both. "></div> </div> <div style="clear:both. "></div> </div> <div class="box_pagto"> <div class="tit_pagto">endereço para entrega da nota fiscal</div> <div class="entrega"> @local </div> <div class="formas" style="float:left. line-height:20px. margin-top: 65px.. "> Endereço: <span>@endereço</span><br /> Bairro: <span>@bairro</span><br /> CEP: <span>@cep</span><br /> Cidade: <span>@cidade</span><br /> <br /> <a id="link-novoendereco" href="#"> <strong>Cadastrar novo endereço</strong></a> </div> <div class="formas" style="float: right. font-size: 12px. line-height: 20px. margin-right: 25px. margin-top: 125px. "> <a id="link-novoendereco" href="#"> <strong>editar endereço</strong></a> </div> <div style="clear:both. "></div> <div id="form-novoendereco" style="margin-left: 20px. display:none. "> <form id="novoendereco" class="div_new cinza" action="#" method="post"> <label>CEP</label><br><br> <input id="cep" name="cep" type="text" maxsize="16" size="15"> <a id="finalizar" href="#"> <input type="button_cep" class="button_cep" value="completar"> </a> <label style="width:193px. ">Endereço<br><input id="endereco" name="endereco" type="text" maxsize="50" size="28"></label> <label style="width:65px. ">Numero<br><input id="numero" name="numero" type="text" maxsize="10" size="5"></label> <label style="width:103px. ">Complemento<br><input id="complemento" name="complemento" type="text" maxsize="30" size="10"> <br> </label> <label>Bairro<br><input id="bairro" name="bairro" type="text" maxsize="50" size="28"> </label> <label style="width:206px. ">Estado<br> <select> <option value="ac">Acre</option> <option value="al">Alagoas</option> <option value="am">Amazonas</option> <option value="ap">Amapá</option> <option value="ba">Bahia</option> <option value="ce">Ceará</option> <option value="df">Distrito Federal</option> <option value="es">Espírito Santo</option> <option value="go">Goiás</option> <option value="ma">Maranhão</option> <option value="mt">Mato Grosso</option> <option value="ms">Mato Grosso do Sul</option> <option value="mg">Minas Gerais</option> <option value="pa">Pará</option> <option value="pb">Paraíba</option> <option value="pr">Paraná</option> <option value="pe">Pernambuco</option> <option value="pi">Piauí</option> <option value="rj">Rio de Janeiro</option> <option value="rn">Rio Grande do Norte</option> <option value="ro">Rondônia</option> <option value="rs">Rio Grande do Sul</option> <option value="rr">Roraima</option> <option value="sc">Santa Catarina</option> <option value="se">Sergipe</option> <option value="sp">São Paulo</option> <option value="to">Tocantins</option> </select> </label> <label style="width:174px. ">Cidade<br><input id="cidade" name="cidade" type="text" maxsize="50" size="10"></label> </form> </div> <div style="clear:both. "></div> </div> <div class="termos"> <div class="cinza" align="center"> <p style="width: 400px. margin-top: 10px. "><input type="checkbox" id="termos" name="termos" /> Li e concordo com os <a href="#"><strong>termos de contrato e prestação de serviços.</strong></a></p> </div> <a id="finalizar" href="#"> <input type="button" class="button" value="FINALIZAR COMPRA"> </a> </div> </div> </div> </div> </div> </body>
</html>Discussão (2)
Carregando comentários...