Publicidade

ukow

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

cartão de credito

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 lucas70770
      Ola, estou montando uma pagina de administração de um site. Esta pagina em especifico fará o update de fotos, e com um botão 'Adicionar Foto' ele acrescenta um novo input file. Cada input criado é colocado um id especifico( id="arquivo1"... id="arquivo2", etc... ), e eles tem uma barra de progress bar(tambem aparece a porcentagem da transferencia), e quando o form for dado submit deve começar a transferência para o servidor. Mais quero saber como posso verificar se todos os progress bar já foram concluídos com jquery. Obrigado pela atenção.
    • Por mbmesquita
      Boa tarde
       
      Tenho um site onde os usuarios fazem uma avaliação do cliente e ganha alguns pontos por isso, só que preciso criar um sistema de cupom e não sei por onde começar com isso, se alguém puder ajudar ou dar um norte eu agradeço.
       
      No caso eu preciso saber como fazer um formulário ou um input, onde eu colocaria o nome do cupom (já inserido no banco de dados) e após submeter esse input, se ele for existente no banco, validaria o cupom e automaticamente não permitiria usar o mesmo cupom de novo.
       
      No caso o que preciso exatamente é saber como inserir esse nome do cupom e após validado não poder usar mais o mesmo cupom.
       
      Desde já agradeço.
    • Por slotos
      Boa tarde,
       
      Não sei se está na área correta mas seguinte, estou com um problema, e aindei testando em diversos servidores, o que acontece
       
      No meu localhost o filter_input(INPUT_SERVER, '....') REQUEST_URI ou HTTP_HOST ou qualquer outro, funciona normalmente, porém em alguns servidores web que andei testando, não me retorna nada. alguns funciona e retorna normalmente e outros não, o que pode ser isso?
       
      Agradeço desde já
    • Por vinitf
      Tenho um input para o usuário escolher quantos números vão estar no array e estou tentando colocar outro agora para ele escolher a quantidade de arrays que vai gerar através de JSON, mas estou tendo dificuldades. 
      <html>
      <input  placeholder ="Quantidade de elementos" id="quantidadeElementos" />
      <input placeholder ="Quantidade de listas" id="quantidadelistas"/>
      <button onclick="myFunction()">Gerar</button>
      <p id="gerar"></p>
      <p id="demo"></p>
      </html>
       
      <script>
      function myFunction() {
        var listas = {
          listainicial: [],
          nova: []
        };
        var max = document.getElementById("quantidadeElementos").value || 5;
        for (var i = 0; i < max; i++) {
          listainicial.push(parseInt(Math.random() * 100));
          var n = document.getElementById("quantidadelistas").value || 5;
          for (var n = 0; n < max; n++) {
            listainicial.push(parseInt(Math.random() * 100));
            listas.listainicial.push({
              outra: []
           });
         }
          document.getElementById("gerar").innerHTML = listainicial;
          document.getElementById("demo").innerHTML = nova;
        }
        document.getElementById("botão").addEventListener("click", myFunction);
      }
      </script> 
    • Por halfar
      Ao executar o codigo tem dado alguns problemas.
       
      Primeiro: o DataType gera erro logo de início. Se eu troco por html, funciona melhor, todavia existe um outro erro:
      function(retorno), esta funcao retorna valores nulos..
       
      Abaixo o codigo php:

       
       
       
      o script: