Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Crik

CPF ou CNPF com Máscara.

Por , em Javascript

Recommended Posts

Crik    0

Crik
Postado

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;
	}
}

// Validação dos campos
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;
} 

// Gera todos os gatilhos de análise pré-processamento iniciais
$( 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/"><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/"><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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kikombat    16

kikombat
Postado

adicione ao seu projeto o plugin maskedinput

HTML

 

<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
</head>
<body>
<input type="text" name="cpfcnpj" class="mycpfcnpj"/>
</body>
</html>

JS

 

$(function() {
 $('.mycpfcnpj').focusout(function() {
        var cpfcnpj, element;
        element = $(this);
        element.unmask();
        cpfcnpj = element.val().replace(/\D/g, '');
        if (cpfcnpj.length > 11) {
            element.mask("99.999.999/999?9-99");
        } else {
            element.mask("999.999.999-99?9-99");
        }
    }).trigger('focusout');
 
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito