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 Márvin Edge
      cidade_bairro.jsonBom dia galera, to quebrando a cabeça aqui e não sei o que tá acontecendo, coloquei em um arquivo json as cidades e os bairros delas, e escrevi um código javascript para puxar os dados e preencher o select do formulário em html, mas o select não exibe nada.
       
      Código javascript
      <script type="text/javascript">    
          
              
              $(document).ready(function () {
                                  
                                  $.getJSON('cidade_bairro.json', function (data) { alert(JSON.(data))
                                      var items = [];
                      var options = '<option value="">Escolha uma cidade</option>';    
                      $.each(!data, function (key, val) {
                          options == '<option value="' + val.nome + '">' + val.nome + '</option>';
                      });                    
                      $("#cidades").html(options);                
                      
                      $("#cidades").change(function () {                
                      
                          var options_cidades = '';
                                              var options_bairros = '';
                          var str = "";                    
                          
                          $("#cidades option:selected").each(function () {
                              str += $(this).text();
                          });
                          
                          $.each(data, function (key, val) {
                              if(val.nome == str) {                            
                                  $.each(val.cidades, function (key_city, val_city) {
                                      options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
                                  });                            
                              }
                          });
                                      }).change();
                                          
                                      $("#bairros").html(options);
                                      
                                      $("#bairros").change(function () {
                                                  
                          $("#bairros option:selected").each(function () {
                                                  str += $(this).text();
                                              });
                                              
                                              $.each(data, function (key, val) {
                                                  if(val.nome == str) {
                                                      $.each(val.bairros, function (key_neighborhood, val_neighborhood){
                                                          options_bairros += '<option value="' + val_neighborhood +'">' + val_neighborhood + '</option>';
                                                      });
                                                  }
                                              });
                          
                      }).change();        
                  
                  });
              
              });
              
          </script>
       
      Código html
       
      <body>
      <form>
              
              <!-- Cidade -->
              <select id="cidades">
                  <option value=""></option>
              </select>
                      <!-- Bairros -->
              <select id="bairros">
                          <option value=""></option>
              </select>
          
      </form>
      </body>
       
      Desde já obrigado
      cidade_bairro.json
      index.html
    • Por lvsis
      E ai pessoal, to com um pequeno problema: tenho um script que ao clicar em um botão ele adiciona um alguns inputs pelo XMLHttpRequest, mas ao adicionar os novos campos ele zera o valor dos anteriores. Tem algum jeito de parar com isso? 
       
      Obs.: Se tiver alguma coisa errada com o post me avisem pois esse é meu primeiro aqui no fórum, valeu. 
    • Por Caio Marcio de Campo
      Quando tento abrir o StarTeam logo aparece a mensagem "Java_SDK1.8.0_121" is an unrecognized Java VM name. No micro estão instalados O Java e o Java SDK, coloquei-os nas pastas C:\Arquivos de Programas\Componentes\Java\JRE e C:\Arquivos de Programas\Componentes\Java\SDK e não tem em mais nenhum lugar (coloco nestas pastas para não ficar criando um monte delas com nomes de versões). Tenho que fazer alguma alteração específica em algum arquivo do StarTeam? Uso também o Eclipse. O nome Java SDK1.8.0_121 fui eu que coloquei, já tentei JRE, SDK, entre outros ...
    • Por pitanga
      Estou tentando fazer buscas em um index feito com Lucene que me foi enviado. São buscas simples que não estão dando certo...
       
      package portugues; //https://lucene.apache.org/core/2_9_4/queryparsersyntax.html import java.nio.file.Paths; import javax.management.Query; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.index.DirectoryReader; import org.apache.lucene.index.IndexReader; import org.apache.lucene.queryparser.classic.QueryParser; import org.apache.lucene.search.IndexSearcher; import org.apache.lucene.store.FSDirectory; public class Buscador { public static void main(String[] args) { IndexReader reader = DirectoryReader.open(FSDirectory.open(Paths.get("/home/janaina/Bureau/projet_java/MyLuceneIndex"))); IndexSearcher searcher = new IndexSearcher(reader); Analyzer analyzer = new StandardAnalyzer(); QueryParser parser = new QueryParser("contents", analyzer); Query query1 = parser.parse("pomme"); Query query2 = parser.parse("pomme" AND "banane"); Query query3 = parser.parse("pomme" OR "banane"); Query query4 = parser.parse("pomme*"); System.out.println(query1); System.out.println(query2); System.out.println(query3); System.out.println(query4); } } Eu só preciso encontrar algumas palavras usando Query Parser Syntax. Desculpa se a pergunta é besta. É que sou iniciante... Obrigada! Se alguém tiver outra sugestão, agradeço também!
    • Por Gustavo Arruda
      Identifiquei um bug ao utilizar uma variável combo box numérica com casas decimais no GX Ev3. Nas versões Ev1 e Ev2 o mesmo exemplo funciona perfeitamente.
      Eu não sou bom em escrever, mas vou tentar descrever o problema. Se alguém não entender eu tento de novo!
      Quem puder me ajudar faça o seguinte:
      1 - Crie uma variável do tipo Numeric(7.2) no WebForm em uma WebPanel.
      2 - Na tela defina-a como um combo box com os valores inteiros ou quebrados:
      Exemplo:
      &CASA_DECIMAL.AddItem(100, "100%") &CASA_DECIMAL.AddItem(75, "75%") &CASA_DECIMAL.AddItem(50.00, "50%") &CASA_DECIMAL.AddItem(40.00, "40%") &CASA_DECIMAL.AddItem(35.15, "35,15%") 3 - Crie um evento Enter ou qualquer outro para "printar" o valor da variável de exemplo.
      3.1 - Por exemplo, ao selecionar a opção 75% e "printar" o valor através do evento, o valor muda para 7500,00, ao invés de 75,00.
      Exemplos:
      &CASA_DECIMAL.ToFormattedString() //- O resultado de 75%, é : 7500,00 &CASA_DECIMAL.ToString() // - O resultado de 75%, é: 7500.00. Estou usando GeneXus Ev3(update 11), gerando Java com JDK 1.8.0_101.
      Este problema só acontece quando a variável é um combo box. Quando é um input Edit, o valor é printado corretamente.