Jump to content
ukow

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

Recommended Posts

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!

Share this post


Link to post
Share on other 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 1

Share this post


Link to post
Share on other 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 :/

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other 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 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By mpcarvalho
      Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto.
       
      No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. 
       
      O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png".
       
      O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589
       
      Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. 
       
      Segue abaixo o script utilizado. Desde já agradeço!
       
      <script>
              function loadImgs(){
                /*--- Dados do formulário ---*/
                var dataform = document.forms[0] || document.forms['dados'];
                //var t = dataform.imgtotal.value;
                var url = dataform.url.value;
                var ext = dataform.ext.value;
                var ean = dataform.ean.value;
                dataform.buscar.disabled = true;
                  
                /*--- Gerar IMGS ---*/
                var div = document.getElementById('dl_imgs') || document.dl_imgs;
                div.innerHTML = "";

                novoArray = ean.split(',');
                var matriz = [novoArray];
                  
               for(var i=0; i<matriz.length; i++) {
                     div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />';
               }
      }
      </script>
       
      PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;
    • By Mad_Max
      Estou lendo o livro do waldemar neto sobre nodejs, e tem uma parte que não consigo sair, fiz uma configuração para rodar um teste  na minha aplicação, baixei os modules que o livro pediu: mocha, chai e p supertest e no meu package.json coloquei o seguinte script: 
       
      "test:integration": "NODE_ENV=test mocha --opts test/integration/mocha.opts test/integration/**/*_spec.js"  
      so que quando eu rodo com o npm run dev tes:integration como o livro mandou me aparece esse erro:
       
      > api-loja-virtual@1.0.0 test:integration /home/ed/projeto/api-loja-virtual
      > NODE_ENV=test mocha --opts test/integration/mocha.opts test/integration/**/*_spec.js
      /home/ed/projeto/api-loja-virtual/node_modules/mocha/lib/cli/options.js:209
            throw new Error(`Unable to read ${filepath}: ${err}`);
            ^
      Error: Unable to read test/integration/mocha.opts: Error: ENOENT: no such file or directory, open 'test/integration/mocha.opts'
          at loadMochaOpts (/home/ed/projeto/api-loja-virtual/node_modules/mocha/lib/cli/options.js:209:13)
          at loadOptions (/home/ed/projeto/api-loja-virtual/node_modules/mocha/lib/cli/options.js:310:22)
          at Object.<anonymous> (/home/ed/projeto/api-loja-virtual/node_modules/mocha/bin/mocha:29:14)
          at Module._compile (internal/modules/cjs/loader.js:776:30)
          at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
          at Module.load (internal/modules/cjs/loader.js:643:32)
          at Function.Module._load (internal/modules/cjs/loader.js:556:12)
          at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
          at internal/main/run_main_module.js:17:11
      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! api-loja-virtual@1.0.0 test:integration: `NODE_ENV=test mocha --opts test/integration/mocha.opts test/integration/**/*_spec.js`
      npm ERR! Exit status 1
      npm ERR! 
      npm ERR! Failed at the api-loja-virtual@1.0.0 test:integration script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
      npm ERR! A complete log of this run can be found in:
      npm ERR!     /home/ed/.npm/_logs/2019-07-18T23_16_05_549Z-debug.log
       
      oque pode ser ??
       
      segue o github para baixar o code: https://github.com/MAdMAX-io/API-loja-virtual
    • By asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
    • By s3c0
      Fala pessoal,
       
      estou com um probleminha com uma integração, onde preciso ler um resposta JSON em ASP Clássico.
       
      a resposta é
       
      {"id":1,"name":"PAC","price":"45.65","custom_price":"45.65","discount":"7.41","currency":"R$","delivery_time":8,"delivery_range":{"min":8,"max":8},"custom_delivery_time":8,"custom_delivery_range":{"min":8,"max":8},"packages":{"price":"45.65","discount":"7.41","format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":1,"name":"Correios","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/correios.png"}},{"id":2,"name":"EXPRESSO","price":"68.51","custom_price":"68.51","discount":"11.95","currency":"R$","delivery_time":5,"delivery_range":{"min":5,"max":5},"custom_delivery_time":5,"custom_delivery_range":{"min":5,"max":5},"packages":{"price":"68.51","discount":"11.95","format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":1,"name":"Correios","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/correios.png"}},{"id":3,"name":".Package","price":"33.51","custom_price":"33.51","discount":"15.58","currency":"R$","delivery_time":6,"delivery_range":{"min":5,"max":6},"custom_delivery_time":6,"custom_delivery_range":{"min":5,"max":6},"packages":{"format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":2,"name":"JadLog","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/jadlog.png"}},{"id":4,"name":".Com","price":"32.63","custom_price":"32.63","discount":"26.48","currency":"R$","delivery_time":5,"delivery_range":{"min":4,"max":5},"custom_delivery_time":5,"custom_delivery_range":{"min":4,"max":5},"packages":{"format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":2,"name":"JadLog","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/jadlog.png"}}  
      Tenho a seguinte página para receber essa resposta
       
      <!--#include file="includes/json2.asp"--> <% Dim objXML, Result Set objXML = Server.CreateObject("Microsoft.XMLHTTP") On Error Resume Next For i = 1 To 3 objXML.Open "POST" , url, False , "", "" objXML.setRequestHeader "content-type", "application/json" objXML.setRequestHeader "accept", "application/json" objXML.setRequestHeader "authorization", "Bearer " & Bearer objXML.Send variavel_json If Err.Number = 0 Then Result = objXML.ResponseText end if Exit For Next Set objXML = Nothing Result = replace(replace(Result,"[",""),"]","") a=Split(Result,".png""}},") For Each x In a set x = JSON.parse(Result) Response.write(x.name & vbNewline) Response.write(x.price & vbNewline) Response.write(x.delivery_time & vbNewline) Response.write(x.company.name & vbNewline) Next %> O que ocorre, é que imprimi somente a última linha
       
      Print
      .Com 32.63 5 JadLog .Com 32.63 5 JadLog .Com 32.63 5 JadLog .Com 32.63 5 JadLog  
       
      Alguém poderia me dizer onde estou errando?
       
      Agradeço a atenção de todos!
       
      Abraços
    • By TaisStream
      Como configurar essa query com inner join, no arquivo .xml?
      Me ajudem pf eu comecei mas estou perdida,  pesquisei já vi algo de /root... mas minha query esta diferente, nao sei se falta algo
       
       
      QUERY ATUAL:
      set mapreduce.job.queuename=low_relatorios; 
      set mapreduce.job.max.split.locations=100;
      SELECT a.num_msisdn,
             a.max_date
      FROM fact.dw_f_rcrg_gems_rate_subsc t
      INNER JOIN
        (SELECT num_msisdn,
                MAX(dat_operacao) AS max_date
         FROM fact.dw_f_rcrg_gems_rate_subsc
         WHERE (ref_date)>=$startdate
           AND ref_date<=$finaldate
           AND ide_plano_tarifario_atual IN (48,
                                             50,
                                             51,
                                             52,
                                             53,
                                             59,
                                             61,
                                             62,
                                             63,
                                             67,
                                             73,
                                             74)
         GROUP BY num_msisdn)a ON a.num_msisdn = t.num_msisdn
      AND a.max_date = t.dat_operacao
      WHERE ref_date>=$startdate
      AND ref_date<=$finaldate;
       
      QUERY CONFIGURANDO NO XML: 
       
          <value><![CDATA[[
      INSERT
              overwrite TABLE fact.dw_f_rcrg_gems_rate_subsc t 
              (
                      a.num_msisdn,
                      a.max_date
              )
      (SELECT
          INNER JOIN
      SELECT      
              MAX(dat_operacao) AS max_date;
      FROM fact.dw_f_rcrg_gems_rate_subsc) a
         WHERE (ref_date)>='$startdate'
           AND ref_date<=$'finaldate'
           AND ide_plano_tarifario_atual IN (48,
                                             50,
                                             51,
                                             52,
                                             53,
                                             59,
                                             61,
                                             62,
                                             63,
                                             67,
                                             73,
                                             74)
         GROUP BY num_msisdn)a ON a.num_msisdn = t.num_msisdn
                  AND a.max_date = t.dat_operacao
      WHERE ref_date>='$startdate'
      AND ref_date<=$finaldate;]]>
      </value>
       
       
      Poderiam me ajudar por favor, sou estagiario na area e ainda estou aprendendo.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.