Ir para conteúdo
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!

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 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 :/

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

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>

 

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 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


  • Conteúdo Similar

    • Por Teo Carlo
      Amigos,
       
      Preciso de ajuda para montar uma QUERY, se é que o que eu quero é possivel:
       
      Hj, eu faço a consulta das seguinte forma:
       
      $sqlpub = $mysqli->prepare("SELECT p.cod_pub, p.cod_franquia, p.cod_tipo,p.thumbcolor,p.thumbgray,p.data_inicio,p.data_fim,p.status, r.logo FROM tbl_publicacao p, tbl_pubcidade c, tbl_franquia f, tbl_rede r WHERE p.cod_pub = c.cod_pub AND p.cod_franquia = f.cod_franquia AND f.cod_rede = r.cod_rede AND c.cod_cidade = '$cod_cidade' order by p.data_pub"); $sqlpub->execute(); $sqlpub->bind_result($cod_pub,$cod_franquia,$cod_tipo,$color,$gray,$inicio,$fim,$status,$logo); while ($sqlpub->fetch()) { array_push($result_pub, array("cod_pub" => $cod_pub, "cod_franquia" => $cod_franquia, "cod_tipo" => $cod_tipo, "logo_franquia" => $logo, "thumb_color" => $color, "thumb_gray" => $gray, "data_inicio" => $inicio, "data_fim" => $fim, "status" => $status)); } meu resultado é:
       
      [{"cod_pub":1,"cod_franquia":2,"cod_tipo":4,"logo_franquia":"ea97c073905e77c2fe3fd07dc2e12609.png", "thumb_color":"thumbcolor_272399d50c07edd0289c531b6f791f9f_2.jpeg", "thumb_gray":"thumbgray_272399d50c07edd0289c531b6f791f9f_2.jpeg", "data_inicio":"2018-04-18","data_fim":"2018-04-25","status":"A"}  
      Esta funcionando perfeitamente, porém eu preciso adicionar mais informações nessa saída.
       
      Tenho uma tabela chamada tbl_galeria, que possue o cod_pub da seguinte forma:
       
      cod_pub imagem 1 aaa.jpeg 1 ccc.jpeg 1 bbb.jpeg  
      Eu preciso que meu resultado, após montar o array_push produza algo assim:
       
      [{"cod_pub":1,"cod_franquia":2,"cod_tipo":4,"logo_franquia":"ea97c073905e77c2fe3fd07dc2e12609.png",
      "thumb_color":"thumbcolor_272399d50c07edd0289c531b6f791f9f_2.jpeg",
      "thumb_gray":"thumbgray_272399d50c07edd0289c531b6f791f9f_2.jpeg",
      "galeria":"aaa.jpeg;bbb.jpeg;ccc.jpeg",
      "data_inicio":"2018-04-18","data_fim":"2018-04-25","status":"A"}
       
      Alguem poderia me dar uma luz ?
    • Por edsouzza
      Pessoal, a ideia é que quando o usuário escolher um campo identificado no checkbox o sistema deverá inserir o texto do checkbox no ArrayList. Mas esta pegando apenas o ultimo nome do ultimo checkbox.
      public void listarOpcoesDeCampos() {
      //para manipular o arrayList de campos voce dever criar outro arrayList para recebe-lo e assim com lst.get(0) chamar o campo desejado
      lstCamposRetornados = retornarNomesCampos(); //retornando o codigo -> lstCamposRetornados.get(0) -> este procedimento me da acesso a qdeColunas tb
          //definindo o posicionamento dos checksbox dos campos
          int pos_coluna = 50, pos_linha = 40, tam_linha = 250, alt_linha = 30;
          for (int i = 0; i < qdeColunas; i++) {
              //criando e mostrando um checkbox com o nome da coluna da tabela
              chk = new JCheckBox();
              chk.setBounds(pos_coluna, pos_linha, tam_linha, alt_linha);
              c.add(chk);
              c.repaint();
              chk.setText(retornarNomesCampos().get(i));         //setando o nome da coluna no checbox            
              
              //registrando o objeto que sofrerá ação
              chk.addActionListener(this);
              
              //se posicionando para criacao do proximo checkbox
              pos_coluna = 50;
              pos_linha = pos_linha + 20;
          }
                 
      }
      @Override
      public void actionPerformed(ActionEvent e) {
      lstListaCampos.add(chk.getText());
      }
      Fiz um laço for para visualizar o que a lista contem e percebi que esta pegando somente o último ítem
      saída atual:
      campo OBS
      campo OBS
      A saida desejada é:
      campo CODIGO
      campo OBS
      Ou seja no ArrayList deverá conter apenas os ítens(checkbox) selecionados.
    • Por FuckSystem
      An... Oii pessoal sou novo comecei hoje
      Ainda nem passei aquela madruga de tutorial de programação mas me ajudem com isso
      File f = new File("dados.txt");  f.delete();   Aparece um erro dizendo Unknown entity "File" Unknown entity "f"   Se puder ajudar agradeço tmj ,_, vlw por ler até aqui    
    • Por BrunoFerreira
      Boa noite
      Tenho uma consulta que me da vários serviços cadastrados. 
      A imagem + um link + um telefone + descrição por exemplo.
      Quero deixar só a imagem e ao clicar nela (cai/exibe/etc) as outras informações
      IMG (clicar) aparece (link+telefone+descrição)
       
      eu usei este... mas todos os itens exibidos viram um botão.. ótimo! ... mas todos só dão a informação do primeiro item exibido.
      Coloquei aqui o que estou usando e como.. se alguém souber e puder me da um toque.. obrigado
      se eu descobrir antes.. eu respondo aqui tb...
      //assim que coloquei.. funciona mas só para o primeiro <?php while($user = mysqli_fetch_assoc($result)){ ?> <button type="button" onclick="Mudarestado('minhaDiv')"> <?php echo '<img src="'.$user['imgagem'].'" style="max-width: 300px">'; ?><br> //quero clicar aqui </button> <div id="minhaDiv" style="display:none"> <a href="<?php echo $user['anuncios_url']; ?>" target="_blanck">LINK</a><br> // e aparecer ou esconder aqui <?php echo $user['telefone']; ?><br> <?php echo $user['descricao']; ?><hr> </div> <?php } ?> <?php while($user = mysqli_fetch_assoc($result)){ ?> <?php echo '<img src="'.$user['imgagem'].'" style="max-width: 300px">'; ?><br> //quero clicar aqui <a href="<?php echo $user['anuncios_url']; ?>" target="_blanck">LINK</a><br> // e aparecer ou esconder aqui <?php echo $user['telefone']; ?><br> <?php echo $user['descricao']; ?><hr> <?php } ?> funciona mas só exibe sempre a primeira consulta mesmo tendo vários item vindo do bd function Mudarestado(el) { var display = document.getElementById(el).style.display; if (display == "none") document.getElementById(el).style.display = 'block'; else document.getElementById(el).style.display = 'none'; } <div id="minhaDiv" style="display:none">COLOQUEI A IMAGEM AQUI (VEM DO BD</div> <button type="button" onclick="Mudarestado('minhaDiv')">COLOQUE (LINK+TEL+DESCRIÇÃO AQUI VEM DO BD</button>  
    • Por leaio
      Olá pessoal estou desenvolvendo um app para android no visual Studio que calcula a idade de um cachorro para anos humanos, para isso estou recuperando o numero digitado (números) de uma TextView convertendo em uma String e depois para um Int para fazer o cálculo, roda sem erros, mas quando clica no botão para calcular o app simplesmente fecha com mensagem de erro, testei no emulador e no próprio cel e dá o mesmo erro, por favor me ajudem... segue o código...
       
      package idadedecachorro.com.idadedecachorro; import android.icu.text.AlphabeticIndex; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity { private Button botaoDescobrir; private EditText Idade; private TextView Resultado; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Idade = findViewById(R.id.lblIdade); botaoDescobrir = findViewById(R.id.btnDescobrir); Resultado = findViewById(R.id.txtResult); botaoDescobrir.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int valorDigitado; int result; String textoDigitado; textoDigitado = Idade.getText().toString(); valorDigitado = Integer.parseInt(textoDigitado); result = valorDigitado * 7; Resultado.setText(result); } }); } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.