Publicidade

ukow

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

cartão de credito
Patrocínio:

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!

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

1

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 :/

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
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>

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Realmente era isso hahaha

Obrigado Michel! Deu certo :D

1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora

  • Próximos Eventos

  • Conteúdo Similar

    • Por costacontato
      Boa noite!

      Sou novo por aqui, novo também no ambiente da programação.
      Estou aprendendo e nisso busco um bom material para estudar Java, tenho ótimas noções em lógica pois estudo matemática.

      Pesquisando encontrei o seguinte material e gostaria da opinião de pessoas do meio.

      - Para uma primeira introdução:
      Java. Para Iniciantes
      https://www.amazon.com.br/Java-Para-Iniciantes-Herbert-Schildt/dp/8582603363/ref=pd_bxgy_14_img_2?_e...

      - Para um estudo mais detalhado:
      Java. A Referência Completa
      https://www.amazon.com.br/Java-Refer%C3%AAncia-Completa-Herbert-Schildt/dp/8576087553/ref=sr_1_1?s=b...

      Autor: Herbert Schildt (Autor famoso por conta de seus livros sobre C e C++)
    • Por Gabrielvt14
      Olá pessoal. Não tenho muito conhecimento em javascript, mas preciso fazer a integração de uma API de pagamento.
       
      Nunca realizei integrações com alguma API antes.
       
      Seguindo a documentação vi que precisa primeiro gerar um token de transação.
       
      Então tenho esse código:
      function GeraToken() { var base64 = $.encodeBASE64(AppKey:CHAVE, Signature:ASSINATURA); $.ajax({ url: "http://desenvolvimento.intermeio.com/api/v2_1/Token/Gerar", headers: { "Authorization": "Intermeio " + base64, Content-Type: application/json }, type: "POST", crossDomain: true, dataType: "json", success: function () { alert('FOI'); }, error: function (xhr, status) { alert('NAO FOI'); } }); } Onde a funcao GeraToken() é um botão que chama.
       
      Mas eu queria ter a certeza que esta correta a chamada.
      Quando clico no botão ele nao me retorna nenhum dos dois alerts. O mais ideal seria me retornar na tela mesmo o token, só pra eu ver mesmo que funcionou, porque eu preciso armazenar esse token  na base de dados.
      Na API diz que o retorno será em JSON.
       
      Alguém poderia me ajudar?
       
      Grato desde ja!
    • Por AndersonWS
      Olá achei esta função na net porém ela não funciona pois mesmo selecionando uma opção continua dando a mensagem de erro, segue:
       
      function validate() { counter=0 finalidade=document.forms[0].finalidade if (finalidade.checked) { counter++ } if (counter==0){ alert("Selecione pelo menos uma finalidade!") return false; } return true; } <form action="action.php" method="post" autocomplete="off" enctype="multipart/form-data" onsubmit="return validate()"> <input type="checkbox" name="finalidade" value="1"/>Aluguel <input type="checkbox" name="finalidade" value="1"/>Venda </form> Qual o problema?
    • Por rsm_rlb
      Senhores, 
      Estou começando a estudar Java. Trabalho com HTML e CSS e tenho uma noção de PHP (nada muito avançado) mas quero/preciso aprender Java. Gostaria então de algumas direções...
      1 - Existe algum programa melhor que o Eclipse ou realmente pego o eclipse para estudar?
      2 - Qual o melhor servidor para teste? Uso o Easy PHP para mexer nos sites que eu trabalho/estudo, mas acredito que ele não rode Java. 
      3 - Tenho a apostila da Caelum e algumas apostilas da "casa do código". Além disso conheço os sites w3schools e Code Academy. São bons para começar? Me indicariam alguma outra video aula/apostila?
       
      Edit: Se quiserem me indicar algo para SQL também, será bem vindo. 
       
      Desde já, agradeço a atenção.
    • Por Jefferson andre
      Saudações
       
      Preciso de um software que desenhe as telas para mim ir modelando conforme a minha necessidade, no netbeans faz isso para o java usando a opção new -> form Jpanel
       
      Sera que existe a mesma opção para o PHP ? e onde fica ?
       
      eu não quero a parte da programação apenas a parte que desenha a tela pois acho cansativo ficar testando onde os campos devem ficar