Ir para conteúdo

POWERED BY:

Arquivado

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

ukow

Validação de campo Cartão de Crédito

Por , em Javascript

Recommended Posts

ukow    1

ukow
Postado

Olá!

Estou tentando montar um campo para validação de cartão de crédito e sua bandeira; acabei encontrando o seguinte código: http://jsfiddle.net/q0x3ksv3/

Funciona perfeitamente nessa URL, porém quando tento incluí-lo no meu site, não funciona, tem algo faltando? Segue meu código para entenderem melhor: 

<script>
var cartoes = {
    visa: /^4[0-9]{12}(?:[0-9]{3})/,
    mast: /^5[1-5][0-9]{14}/,
    amex: /^3[47][0-9]{13}/,
	invalidos: /^[0126789]|^5[06-9]{1}|^3[1235689]/
};

document.getElementById('num').addEventListener('keyup', testarCC);
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');

function testarCC(e) {
    var nr = this.value;
    var tipo;
    for (var cartao in cartoes) if (nr.match(cartoes[cartao])) tipo = cartao;
    if (tipo) document.getElementById(tipo).click();
    else for (var i = 0; i < inputs.length; i++) inputs[i].checked = false;
}
</script>
<fieldset class="fsResDir">
    <legend>Dados do Cartão&nbsp;</legend>
    <input type="radio" name="RadBand" id="visa" />
    <label for="visa">
        <img src="visa.png" />
    </label>
    <input type="radio" name="RadBand" id="mast" />
    <label for="mast">
        <img src="master.png" />
    </label>
    <input type="radio" name="RadBand" id="amex" />
    <label for="amex">
        <img src="amex.png" />
    </label>
    <label for="val" class="lab90">Validade:</label>
    <input type="text" class="ent20Form" id="val" name="TxtValMes" />/
    <input type="text" class="ent40Form" name="TxtValAno" />
    <label for="num" class="lab90">Numero:</label>
    <input type=text class="ent120Form" id="num" name="TxtNumero" />
    </div>
</fieldset>

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Michel Wilhelm    6

Michel Wilhelm
Postado

Dá uma olhada nesta biblioteca https://github.com/stripe/jquery.payment 

 

Ela valida e também retorna qual o cartão baseado na numeração informada

Compartilhar este post

Link para o post
Compartilhar em outros sites

ukow    1

ukow
Postado
4 minutos atrás, Michel Wilhelm disse:

Dá uma olhada nesta biblioteca https://github.com/stripe/jquery.payment 

 

Ela valida e também retorna qual o cartão baseado na numeração informada

 

Ele validou certinho, mas o que preciso é como o exemplo do post, que a bandeira do cartão seja informada automaticamente na tela após o preenchimento, e nessa biblioteca preciso dar uma ação pra isso :/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Michel Wilhelm    6

Michel Wilhelm
Postado
12 minutos atrás, ukow disse:

 

Ele validou certinho, mas o que preciso é como o exemplo do post, que a bandeira do cartão seja informada automaticamente na tela após o preenchimento, e nessa biblioteca preciso dar uma ação pra isso :/ 

var cartoes = {
    visa: /^4[0-9]{12}(?:[0-9]{3})/,
    mast: /^5[1-5][0-9]{2}/,
    amex: /^3[47][0-9]{2}/
};




function testarCC(e) {
		var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
    var nr = this.value;
    var tipo;
    console.log(nr);
    for (var cartao in cartoes) {
    
    	if (nr.match(cartoes[cartao])) {
      	tipo = cartao;
      }
    }
    
    if (tipo) {
	    document.getElementById(tipo).checked=true
    }
    else {
    	for (var i = 0; i < inputs.length; i++) {
      	inputs[i].checked = false;
      }
    };
}

document.getElementById('num').addEventListener('keyup', testarCC);

Veja se é mais ou menos isso. Eu testei digitando "5162" que é o inicio de muitos masterscard, ai selecionou automaticamente o radio

Compartilhar este post

Link para o post
Compartilhar em outros sites

ukow    1

ukow
Postado
5 minutos atrás, Michel Wilhelm disse: 

var cartoes = {
    visa: /^4[0-9]{12}(?:[0-9]{3})/,
    mast: /^5[1-5][0-9]{2}/,
    amex: /^3[47][0-9]{2}/
};




function testarCC(e) {
		var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
    var nr = this.value;
    var tipo;
    console.log(nr);
    for (var cartao in cartoes) {
    
    	if (nr.match(cartoes[cartao])) {
      	tipo = cartao;
      }
    }
    
    if (tipo) {
	    document.getElementById(tipo).checked=true
    }
    else {
    	for (var i = 0; i < inputs.length; i++) {
      	inputs[i].checked = false;
      }
    };
}

document.getElementById('num').addEventListener('keyup', testarCC);

Veja se é mais ou menos isso. Eu testei digitando "5162" que é o inicio de muitos masterscard, ai selecionou automaticamente o radio

 

 

Estou testando nesse domínio alternativo: http://divinho2.web2420.uni5.net/pag.asp

 

O código da tela ficou esse abaixo, mas continua sem dar retorno algum.

O que é estranho, o código no jsfiddle está funcionando tranquilo, precisa de algum plugin ou algo do tipo?

Obrigado! 

<script type="text/javascript">
var cartoes = {
    visa: /^4[0-9]{12}(?:[0-9]{3})/,
    mast: /^5[1-5][0-9]{2}/,
    amex: /^3[47][0-9]{2}/
};




function testarCC(e) {
		var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
    var nr = this.value;
    var tipo;
    console.log(nr);
    for (var cartao in cartoes) {
    
    	if (nr.match(cartoes[cartao])) {
      	tipo = cartao;
      }
    }
    
    if (tipo) {
	    document.getElementById(tipo).checked=true
    }
    else {
    	for (var i = 0; i < inputs.length; i++) {
      	inputs[i].checked = false;
      }
    };
}

document.getElementById('num').addEventListener('keyup', testarCC);
</script>
<fieldset class="fsResDir">
    <legend>Dados do Cartão&nbsp;</legend>
    <input type="radio" name="RadBand" id="visa" />
    <label for="visa">
        <img src="visa.png" />
    </label>
    <input type="radio" name="RadBand" id="mast" />
    <label for="mast">
        <img src="master.png" />
    </label>
    <input type="radio" name="RadBand" id="amex" />
    <label for="amex">
        <img src="amex.png" />
    </label>
    <label for="val" class="lab90">Validade:</label>
    <input type="text" class="ent20Form" id="val" name="TxtValMes" />/
    <input type="text" class="ent40Form" name="TxtValAno" />
    <label for="num" class="lab90">Numero:</label>
    <input type=text class="ent120Form" id="num" name="TxtNumero" />
    </div>
</fieldset>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Michel Wilhelm    6

Michel Wilhelm
Postado

Joga o script abaixo do HTML. Pode ser bobo, mas abre o console javascript do browser para ver se emite algum erro, mas acredito que já viu isso

Compartilhar este post

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

  • Conteúdo Similar

    • violin101
      JAVA - Ajuda com erro.
      Por violin101
      Caros amigos, saudações.
       
      Estou escrevendo um Sistema Java Web e quando clico no Botão Salvar, o Java acusa esse erro:

      ERROR: Cannot invoke "Object.toString()" because the return value of "java.util.Map.get(Object)" is null
       
      Já tentei de várias formas resolver esse problema, mas não estou conseguindo.

      Por favor, alguém pode me ajudar identificar a origem e resolver o problema acima ?

      Grato,
       
      Cesar
    • violin101
      Orientação - Jav + MySql
      Por violin101
      Caros amigos, saudações.

      Estou enfrentando um problema que não consigo entender.

      Após Instalar o MySql versão 8.0.36, funciona corretamente realizando as conexões.

      O problema é:
      ---[ após reiniciar o micro, o MySql não faz as conexões.
      --[ tenta localizar este arquivo, mas não acha: my.ini
       
      Onde localizo ou configuro este arquivo na Pasta MySql ?

      Grato,
       
      Cesar
    • violin101
      Java - Ajuda para Instalar o Jasper Reports no Eclipse
      Por violin101
      Caros amigos, saudações.
       
      Por favor, preciso de ajuda em Relação a Instalar o Jasper Reports no Eclipse, pois a opção de Eclipse Marketplace, não encontra para instalar.
       
      Já tentei de todas as formas mas não consegui, alguém conhece alguma rotina explicando este procedimento ?
       
      Grato,
       
      Cesar
    • violin101
      JAVA - Orientação em Instalação do JBoss Tools no Eclipse
      Por violin101
      Caros amantes da informática.
       
      Saudações.
       
      Estou usando o Eclipse Mars versão 4.5.0  e o 4.5.2, acredito que deva ter versões mais novas. 
      Sou novato em JAVA e estou encontrando alguns problema em Instalação de alguns plugins, como por exemplo:
       
      1) quando tento instalar o JBoss Tools através do Eclipse Marteplace, o Eclipse não o encontra na lista de plugins.
      2) se tento instalar através do Install New Software, abaixa alguns arquivos, mas também não instala o JBoss.
      3) se abro o site e arrasto o download para a área de trabalho do Eclipse, também não instala o JBoss.
       
      Caros amigos, existe outra alguma forma de instalar o JBoss Tools no Eclipse e como seria ?
       
      Grato,
       
      Cesar
       
       
    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
×

Informação importante

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

  Aceito