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 Marcos_imasters
      olá pessoa beleza,
       
      tou com a seguinte json
       
       
      cidades":{"carregar":["\"Abadia dos Dourados\",\"Abaet\u00e9\""]}
       
      estou tendo mostrar  dessa forma   
       
            var x = data.cidades.carregar;
       
      for (var i = 0; i < x.length; i++) {
      console.log(x);
       }    
      so que em vez de imprir um de cada vez tá imprimindo tudo junto
       
    • Por Jonathan Abas
      boa noite galera consegui resolver varios problemas com meu API sendo que o loop do meu while tem colocado itens em outros clientes
      o correto seria cliente 1->itens 1 cliente->2 itens->2
      ele á fazendo cliente->1 itens->1 clientes->2itens->1,2,3(ou seja ele tá repitindo os itens do cliente 1 e já puxando itens de um cliente que o while nem mostrou ainda)
       
      preciso de uma ajudinha só falta isso ;-;
      header('Content-Type: application/json'); $sql = mysqli_query($conn, $Search_List) or die (mysql_error()); while($campos = mysqli_fetch_array($sql)){ $arquivos['listapresente'][] = array( 'id_lista'=>$campos[0], 'nome_lista'=>utf8_encode($campos[1]), 'data_valid_lista'=>$campos[2], 'data_cad_lista'=>$campos[3], 'data_eve_lista'=>$campos[4], 'status_lista'=>$campos[5], 'lista_id_cliente'=>$campos[6], 'categoria_id_cat_lista'=>$campos[7], 'id_cliente_parc_lista'=>$campos[8], 'lista_frase'=>utf8_encode($campos[9]), 'latitude'=>utf8_encode($campos[10]), 'longitude'=>utf8_encode($campos[11]), 'logradouro'=>utf8_encode($campos[12]), 'numero'=>$campos[13], 'bairro'=>utf8_encode($campos[14]), 'cep'=>utf8_encode($campos[15]), 'cidade'=>utf8_encode($campos[16]), 'estado'=>utf8_encode($campos[17]), 'forma_retirada'=>$campos[18], 'listapresente_id'=>utf8_encode($campos[19]), 'imagem_lista'=>$campos[20]); $Search_List_Itens = "SELECT * FROM `sysm_itens_lista` WHERE `listapresente_id`= '".utf8_encode($campos[19])."'"; $sql2 = mysqli_query($conn, $Search_List_Itens) or die (mysql_error()); $Search_Itens = mysqli_num_rows($sql2); if($Search_Itens > 0){ while($campoItens = mysqli_fetch_array($sql2)){ $Itens[]=array( 'qtde_item_lista'=>$campoItens[0], 'listas_id_lista'=>$campoItens[1], 'item_id_produto'=>$campoItens[2], 'id_item_lista'=>$campoItens[3], 'listapresente_id'=>utf8_encode($campoItens[4]) ); } $i = ((count($arquivos['listapresente'])) - 1); $arquivos['listapresente'][$i]['listapresenteproduto'] = $Itens; } $vetor = '"data":'; echo "{".$vetor."".json_encode($arquivos)."}"; }  
      segue erro:
      https://imgur.com/QeMz64e
       
      em vez de ele ficar só no cliente que tem o mesmo id que ele , ele aparece em outros clientes com outros ids
    • Por Neto Schneider
      Olá comunidade, estou com um problema que está me atormentando, sou iniciante Java e estou criando um programa que gera um PDF com relações de máquinas de um setor x, meu problema é o seguinte, eu não estou conseguindo alinhar meus textos dentro da tabela ou diminuir o tamanho da imagem gerada, é como se os comandos de alinhamento e redimensionamento não funcionassem, poderiam sanar minha dúvida?
      Segue a minha classe geradora de PDF:
      public void gerarPdf() throws IOException{ Document document = new Document(); try { //Gerar documento PdfWriter.getInstance(document, new FileOutputStream("RelacaoDeMaquinasSTI.pdf")); //Rotação da página document.setPageSize(PageSize.A4.rotate()); document.setMargins(-80, -80, 10f, 0); document.setMarginMirroring(true); //Abertura do documento document.open(); //Fontes Font ititulo = new Font(Font.FontFamily.HELVETICA, 16, Font.BOLD); Font imenu = new Font(Font.FontFamily.HELVETICA, 12, Font.BOLD); Font iconteudo = new Font(Font.FontFamily.HELVETICA, 12); //Topo PdfPTable topo = new PdfPTable(2); PdfPCell cellTopo = new PdfPCell(); cellTopo.setColspan(2); //Primeiro parágrafo Image img = Image.getInstance("src/imgs/logo_grupamento.png"); img.scalePercent(50); Paragraph titulo = new Paragraph("Relação de Computadores STI", ititulo); titulo.setAlignment(ALIGN_CENTER); topo.addCell(img); topo.addCell(titulo); document.add(topo); //Menu PdfPTable menu = new PdfPTable(7); PdfPCell cellMenu = new PdfPCell(); cellMenu.setColspan(7); menu.addCell(new Paragraph("Atendente", imenu)); menu.addCell(new Paragraph("Cliente de Entrada", imenu)); menu.addCell(new Paragraph("Data de Entrada", imenu)); menu.addCell(new Paragraph("Problema", imenu)); menu.addCell(new Paragraph("Solução", imenu)); menu.addCell(new Paragraph("Cliente de Saída", imenu)); menu.addCell(new Paragraph("Data de Saída", imenu)); document.add(menu); //Conteudo PdfPTable conteudo = new PdfPTable(7); PdfPCell cellConteudo = new PdfPCell(); cellConteudo.setColspan(7); MaquinaInc uinc = new MaquinaInc(); for (Maquinas m : uinc.readPdf()){ conteudo.addCell(new Paragraph(m.getAtendente(), iconteudo)); conteudo.addCell(new Paragraph(m.getCliente(), iconteudo)); conteudo.addCell(new Paragraph(m.getEntrada(), iconteudo)); conteudo.addCell(new Paragraph(m.getProblema(), iconteudo)); conteudo.addCell(new Paragraph(m.getSolucao(), iconteudo)); conteudo.addCell(new Paragraph(m.getClientesi(), iconteudo)); conteudo.addCell(new Paragraph(m.getSaida(), iconteudo)); } document.add(conteudo); //Abre no sistema automáticamente Desktop.getDesktop().open(new File("RelacaoDeMaquinasSTI.pdf")); } catch (FileNotFoundException | DocumentException ex) { System.out.println("Error: "+ex); }finally{ //Fecha documento document.close(); } Aguardo ajuda, obrigado! 
    • Por Marina Novello Bortolucci
      Será que alguém pode me ajudar, tenho o código abaixo, gostaria de converte-lo em c#
      HttpClient client = HttpClientBuilder.create().build(); HttpPost post = new HttpPost(URL); FileBody fileBody = new FileBody(path.toFile(), ContentType.DEFAULT_BINARY); StringBody stringBody1 = new StringBody("15425039000128", ContentType.MULTIPART_FORM_DATA); StringBody stringBody2 = new StringBody("154250", ContentType.MULTIPART_FORM_DATA); StringBody stringBody3 = new StringBody("7513", ContentType.MULTIPART_FORM_DATA); // MultipartEntityBuilder builder = MultipartEntityBuilder.create(); builder.setMode(HttpMultipartMode.BROWSER_COMPATIBLE); builder.addPart("login", stringBody1); builder.addPart("senha", stringBody2); builder.addPart("cidade", stringBody3); builder.addPart("f1", fileBody); HttpEntity entity = builder.build(); // post.setEntity(entity); HttpResponse response = client.execute(post);
    • Por gil medeiros
      Pessoal, eu quero criar um sistema parecido com esse > https://www.zotac.com/pt/support#download

       
      Quando eu seleciono em Tipo de Arquivo, os outros <selec> mudam as opções

      Se eu seleciono TODOS, o campo Série muda as opções
       

       
      Como eu consigo esse feito ?
       
      Se possível, alguns links para que eu possa estudar sobre
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: