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 Thiago Ladislau
      Bom dia gostaria de compartilhar um erro que vem ocorrendo há muito tempo na empresa em que trabalho. Porem nunca foi identificada a causa origem do mesmo, Isso ocorre de forma aleatória não tem data nem hora, acontece de repente. Sendo obrigado ao 'fechamento forçado' do sistema que pode gerar problemas na base. Em anexo imagem do Erro.   Grato
    • By TkCode
      Estou tentando desenvolver um código para calcular o valor final de custas de imoveis.
      Exemplo: Entro com um valor de R$50.000,00. Tem o ITBI que é 2% sob os R$50.000,00 + o valor de custas que é o valor de uma tabela (essa tabela tem valores que de R$0,01 até R$17.800,90 é uma valor, e assim sucessivamente)
       
      Então teria que calcular os 2% (do valor informado) + o valor da tabela, dando um resultado final com o valor total (2%+ValorTabela).
       
      Alguem teria como me dar uma dica de como resolver isso?
      Desde já agradeço!
    • By Kefatif
      Prezados, boa tarde.
       
      Preciso de ajuda com dois casos...
       
      1) Preciso criar dois botões "habilitar" e "desabilitar".
       
      Onde ao clicar no botão habilitar, ele grave no banco mysql no campo habilitado "S" para habilitado e "N" caso clique no desabilitar.
       
      2) A segundo etapa seria ao carregar a página do input ele habilitar ou não de acordo com a informação do meu banco.
       
      Agradeço desde já a ajuda de todos.
    • By Jack Oliveira
      Ola pessoal  boa noite..
      Vou tentar explicar aqui o meu problema da melhor forma que der, espero que possam entender...
       
      Amigos eu estou tendo um problema em fazer uma atualização 
      Bom quando vou cadastrar da sucesso e é gravado normal no banco de dados ate ai esta ok..
       
      Seria  o seguinte dentro de um form ele gera linhas ou seja + inputs caso seja preciso entende? Usando javascript´s, quando vou atualizar as informações que esta nas tabelas ou seja
      são 3 tabelas 
      tbl_department 
      dep_id
      nome
      news etc....
       
      tbl_department_openning_hour
      hou_id
      titulo
      time
      dep_id  <-- Aqui onde pega o id da tabela tbl_department
       
       
      tbl_department_faq
      faq_id
      titulo
      conteudo
      dep_id  <-- Aqui onde pega tbm o id da tabela tbl_department
       
      Obs: Ele Grava normal no banco de dados, porem quando atualizar que não esta dando certo, e é preciso que seja atualizado todos os input das tabelas tbl_department_faq e tbl_department_openning_hour. Acredito que já entenderam aqui umas das parte que seria preciso.
       
      Bom vou posta uma parte do HTML  do FORM para melhor entender o que seria ok!!, Sei que não tem nada a ver com o PHP, mais como tinha dito apenas para melhor entender..
      <?php $dep_id = get('EditarItem'); $QueryTblDepartment = DBRead('tbl_department','*',"WHERE dep_id = '{$dep_id}'"); if (is_array($QueryTblDepartment)) { foreach ($QueryTblDepartment as $TblDepartment) { ?> <form method="post" action="?Atualizar=<?= $TblDepartment['dep_id']; ?>" enctype="multipart/form-data"> <div class="col-md-6"> <div class="form-group"> <label>Titulo:</label> <input class="form-control" name="dep_name" value="<?= $TblDepartment['dep_name']; ?>" placeholder="Exemplo: Globo City" autocomplete="off" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Telefone:</label> <input class="form-control telefone" name="dep_phone" value="<?= $TblDepartment['dep_phone']; ?>" placeholder="Exemplo: (00) 0000-0000" autocomplete="off"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>WhatsApp:</label> <input class="form-control whatsapp" name="dep_whatsapp" value="<?= $TblDepartment['dep_whatsapp']; ?>" placeholder="Exemplo: (00) 0.0000-0000" autocomplete="off"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Fax:</label> <input class="form-control" name="dep_fax" value="<?= $TblDepartment['dep_fax']; ?>" placeholder="Exemplo: (00) 0000-0000" autocomplete="off"> </div> </div> <div class="form-group"> <label>Seção de FAQ:</label> <table id="fqSection" class="table table-bordered table-striped"> <thead> <tr> <th style="width:50%;">Titulo</th> <th>Contente</th> <th>Ação</th> </tr> </thead> <tbody> <?php //Departamento FAQ $QueryDepartamentoFaq = DBRead('tbl_department_faq','*',"WHERE dep_id='{$dep_id}'"); if (is_array($QueryDepartamentoFaq)) { foreach ($QueryDepartamentoFaq as $Fa) { $arr_fq_id[] = $Fa['fq_id']; $arr_fq_title[] = $Fa['fq_title']; $arr_fq_content[] = $Fa['fq_content']; }} if(isset($arr_fq_title)): for($i=0;$i<count($arr_fq_title);$i++) { ?> <tr> <td> <input autocomplete="off" type="text" class="form-control" style="width:100%" name="fq_title" value="<?= $arr_fq_title[$i]; ?>"> </td> <td> <textarea class="form-control" cols="30" rows="10" style="width:100%;height:50px;" name="fq_content"><?= $arr_fq_content[$i]; ?></textarea> </td> <td> <span class="btn btn-danger btn-xs"><a onclick="DeletarItem(<?= $arr_fq_id[$i]; ?>, 'DeletarFaq');" href="#!" style="color: #fff;">Excluir</a></span> </td> </tr> <?php //}} } endif; ?> </tbody> </table> <!-- Aqui para criar novos input para serem gravado no banco caso seja preciso --> <input type="button" class="btn btn-info btn-small" id="btnAddFaq" value="+ Adicionar linha" style="margin-bottom:10px;"> </div> <center><hr> <button class="btn btn-primary">Atualizar</button> <br><br> </center> </div> </form> <?php } } ?> Bom ai esta apenas um pouco do form tem mais coisa que seria igual o que preciso resolver
       
      Agora a parte do PHP que preciso resolver, vou posta apenas uma parte para poder entender tbm
       
      <?php // Atualizar Item de Departamento if (isset($_GET['Atualizar'])) { $dep_id = get('Atualizar'); $fq_empty = 0; if( !empty($_POST['fq_title']) && !empty($_POST['fq_content']) ) { $fq_empty = 1; foreach ($_POST['fq_title'] as $value) { //Sempre mostra o erro nesta linha $arr1[] = $value; } foreach ($_POST['fq_content'] as $value) { //Sempre mostra o erro nesta linha $arr2[] = $value; } $j=0; for($i=0;$i<count($arr1);$i++) { //Sempre mostra o erro nesta linha if($arr1[$i]=='' && $arr2[$i]=='') {continue;} else { $new_arr1[$j] = $arr1[$i]; $new_arr2[$j] = $arr2[$i]; $j++; } } } $AtualizarDepartment = array( 'dep_name' => post('dep_name'), 'dep_slug' => UrlAmigavel(post('dep_name')), 'dep_detail' => post('dep_detail'), 'dep_address' => post('dep_address'), 'dep_phone' => post('dep_phone'), 'dep_whatsapp' => post('dep_whatsapp'), 'dep_fax' => post('dep_fax'), 'dep_email' => post('dep_email'), 'meta_title' => post('dep_name'), 'meta_keyword' => post('meta_keyword'), 'meta_description' => LimitarTexto(post('dep_detail'),'200','...') ); $QueryTblDepartment = DBUpdate('tbl_department', $AtualizarDepartment, "dep_id = '{$dep_id}'", TRUE); if ($QueryTblDepartment != 0) { Redireciona('?sucesso&Department'); } else { Redireciona('?erro&Department'); } // Atualizar tbl_department_faq if($fq_empty == 1) { for($i=0;$i<count($new_arr1);$i++) { $TblDepartmentFaq = array( 'fq_title' => $new_arr1[$i], 'fq_content' => $new_arr2[$i], 'dep_id' => $dep_id ); $QueryTblDepartmentFaq = DBUpdate('tbl_department_faq', $TblDepartmentFaq, "dep_id = '{$dep_id}'"); } } if ($QueryTblDepartmentFaq != 0) { Redireciona('?sucesso&AtualizarFaq'); } else { Redireciona('?erro&AtualizarFaq'); } // Criar Novo input para tbl_department_faq if($fq_empty == 1) { for($i=0;$i<count($new_arr1);$i++) { $SqlFaq = array( 'fq_title' => $new_arr1[$i], 'fq_content' => $new_arr2[$i], 'dep_id' => $QueryTblDepartment ); $QueryFaq = DBRead('tbl_department_faq', $SqlFaq); } } if ($QueryFaq != 0) { Redireciona('?sucesso&Faq'); } else { Redireciona('?erro&Faq'); } } Neste caso ao mesmo tempo que teria que atualizar a
      tbl_department_faq
      faq_id
      titulo
      conteudo
      dep_id  <-- Aqui onde pega tbm o id da tabela tbl_department
       
      Ele precisa grava caso seja preciso criar nova linha ou seja criar novo input para atualizar junto entende?
       
      Pessoal espero que eu tenha sido bem objetivo aqui para que possam entender....
       
      Desde já agradeço
    • By rafaelmoreira78
      Boa tarde!
      Estou querendo fazer um select a partir da seleção de um combobox. Nesse combobox o usuário escolhe o tipo de busca que ele quer. Se é por nome, por id, por data etc. E depois, exibe os dados nos campos. Porém, não estou conseguindo e não sei como resolver isso.
      public void consultar(){ String sql ="select * from tbcertificados where ?=?"; try{ pst=conexao.prepareStatement(sql); pst.setString(1,cbConsulta.getSelectedItem().toString()); pst.setString(2,txtBusca.getText()); rs=pst.executeQuery(); if (rs.next()){ lblID.setText(rs.getString(1)); txtNome.setText(rs.getString(2)); comboCursos.setSelectedItem(rs.getString(3)); txtData.setText(rs.getString(4)); txtCH.setText(rs.getString(5)); txtEmpresa.setText(rs.getString(6)); txtObs.setText(rs.getString(7)); }  
×

Important Information

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