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 mkboy
      Olá,
       
      Estou tentando decodificar um Json, já pesquisei um monte e consegui fazer o primeiro nível, mas nao consigo os dados dos demais níveis.
       
      Este é o JSON
       
      { "content": [ {"id": 5685, "total": 4403.3, "shipping": {"city": "Maringa"}, "buyer": {"id": 1658}, "payments": [{ "method": "crediCard"} ], "items": [ { "product": {"id": 68178}, "sku": { "id": 68085}, "amount": 1 } ], "deliverStatus": "UNKNOWN" },  
      Fiz o seguinte:
       
      $resposta = json_decode($retorno); $content = $resposta->content; Ai fiz um for para imprimir o resultado:
       
      foreach($content as $content_dados) { $id = $content_dados->id; echo "<hr>id: ".$id; echo "<br><br>"; }  
      Assim, eu consigo o primeiro resultado, o 5685, mas, não consigo pegar a Cidade que está dentro do content e os outros campos.
       
      Como fazer?
    • Por mbmesquita
      Bom dia amigos, estou com o seguinte problema:
      Já tenho um form que está funcionando perfeitamente, envia todos os dados para o banco e tudo mais, só que preciso acrescentar um INPUT de text (para as pessoas escreverem comentários) nesse mesmo form, e quando coloco esse input e faço o envio pela página php, ele me informar um erro na parte das checkbox, gostaria de saber como fazer sem dar o erro.
       
      a parte do código que já funciona é essa:
      <?php $id_usuario = $_SESSION['id_usuario']; $cidade = $_POST['cidade2']; $saloes = $_POST['saloes_ava']; $valorapx = $_POST['valorapx']; $atendimento = $_POST['atendimento']; $servico = $_POST['servico1']; $tde = $_POST['tde']; $ambiente = $_POST['ambiente']; $opcao=''; for($i=0; $i <= count($_POST['servicosava']); $i++){ $opcao+= $_POST['servicosava'][$i]. ' '; } $sql = " INSERT INTO feedback_recebido3 (id_usuario, cidade2, saloes_ava, servicosava, valorapx, atendimento, servico1, tde, ambiente)values($id_usuario,'$cidade', '$saloes', '".$opcao."', '$valorapx', '$atendimento', '$servico', '$tde', '$ambiente') "; if(mysqli_query($conexao, $sql)){ header('Location: feedsucesso.php') ; } else { echo 'Erro ao tentar inserir o registro'; } ?>  
       
      E outra questão, tenho essas checkbox que são nomes, que são enviadas e só recebo os values delas no banco de dados, na verdade só recebo as somas desses values.
      Gostaria de saber se tem como eu receber além dessa soma, os nomes das checkbox que foram selecionadas?
       
      Desde já agradeço.
    • Por Samuel Candido
      Olá, gostaria de saber como eu posso criar um array de array e atribuir ele a uma variável json.
      Exemplo:
      var dadosTags = new Array(); var tTags = "<?echo $tags;?>".split(' '); for (var i = 0; i < tTags.lenght; i++) { dadosTags.push({tag: tTags[i].toString()}); } $('.chips-initial').material_chip({ data: [{dadosTags}]; //Aqui deveria ter um json com a seguinte estrutura: [{tag: 'cas'},{tag: 'a'},...] }); Porém, não retorna nada.
      O que tem de errado no código?
    • Por heriton
      Boa noite a todos.
       
      Solicito por gentileza um auxilio para validação de campos de formulario HTML com PHP antes de enviar.
       
      Formulário - HTML
                    contact.html
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
          <title>Horus Informática - Soluções em TI</title>
          <!-- Bootstrap -->
          <link href="css/bootstrap.min.css" rel="stylesheet">
          <link href="ionicons/css/ionicons.min.css" rel="stylesheet">
          <link rel="icon" href="img/favicon.ico" type="image/x-icon">
          <!-- main css -->
          <link href="css/style.css" rel="stylesheet">

          <!-- modernizr -->
          <script src="js/modernizr.js"></script>
          <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
          <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
          <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
      </head>
      <body>
          <!-- Preloader -->
          <div id="preloader">
              <div class="pre-container">
                  <div class="spinner">
                      <div class="double-bounce1"></div>
                      <div class="double-bounce2"></div>
                  </div>
              </div>
          </div>
          <!-- end Preloader -->
          <div class="container-fluid">
              <!-- box-header -->
              <header class="box-header">
                  <div class="box-logo">
                      <a href="index.html"><img src="img/logo.png" width="80" alt="Logo"></a>
                  </div>
                  <!-- box-nav -->
                  <a class="box-primary-nav-trigger" href="#0">
                      <span class="box-menu-text">Menu</span><span class="box-menu-icon"></span>
                  </a>
                  <!-- box-primary-nav-trigger -->
              </header>
              <!-- end box-header -->
              <!-- nav -->
              <nav>
                  <ul class="box-primary-nav">
                      <li class="box-label">Sobre Nós</li>
                      <li><a href="index.html">Home</a></li>
                      <li><a href="about.html">Sobre Nós</a></li>
                      <li><a href="services.html">Serviços</a></li>
                      <li><a href="portfolio.html">Portifólio</a></li>
                      <li><a href="contact.html">Contato</a> <i class="ion-ios-circle-filled color"></i></li>
       
                      <li class="box-label">Siga-nos</li>
                      <li class="box-social"><a href="#0"><i class="ion-social-facebook"></i></a></li>
                      <li class="box-social"><a href="#0"><i class="ion-social-instagram-outline"></i></a></li>
                      <li class="box-social"><a href="#0"><i class="ion-social-twitter"></i></a></li>
                      <li class="box-social"><a href="#0"><i class="ion-social-dribbble"></i></a></li>
                  </ul>
              </nav>
              <!-- end nav -->
          </div>
          <!-- top bar -->
          <div class="top-bar">
              <h1>Contato</h1>
              <p><a href="index.html">Home</a> / Contato</p>
          </div>
          <!-- end top bar -->
          <!-- main-container -->
          <div class="container main-container">
              <div class="col-md-6">
                  <form action="enviar.php" method="post">
                      <div class="row">
                          <div class="col-md-6">
                              <div class="input-contact">
                                  <input type="text" name="name" required="required">
                                  <span>Nome</span>
                              </div>
                          </div>
                          <div class="col-md-6">
                              <div class="input-contact">
                                  <input type="text" name="email" required="required">
                                  <span>Email</span>
                              </div>
                          </div>
                          <div class="col-md-12">
                              <div class="input-contact">
                                  <input type="text" name="object" required="required" >
                                  <span>Titulo</span>
                              </div>
                          </div>
                          <div class="col-md-12">
                              <div class="textarea-contact">
                                  <textarea name="message"></textarea>
                                  <span>Mensagem</span>
                              </div>
                          </div>
                          <div class="col-md-12">                            
                              <button type="submit" class="btn btn-box">Enviar</a>
                          </div>
                      </div>
                  </form>
              </div>
              <div class="col-md-6">
                  <h3 class="text-uppercase">Contato</h3>
                  <h5>Creative & Lorem ipsum dolor sit amet</h5>
                  <div class="h-30"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter enim nosmet ipsos nosse non possumus. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur. Tecum optime, deinde etiam cum mediocri amico. Et nemo nimium beatus est; Ac ne plura complectar-sunt enim innumerabilia-, bene laudata virtus voluptatis aditus </p>
                  <div class="contact-info">
                      <p><i class="ion-android-call"></i> (12) 99999-9999 </p>
                      <p><i class="ion-ios-email"></i> contato@horusinformatica.net.br </p>
                  </div>
              </div>

          </div>
          <!-- end main-container -->
          <!-- footer -->
          <footer>
              <div class="container-fluid">
                  <p class="copyright">© Horus Informática 2017</p>
              </div>
          </footer>
          <!-- end footer -->
          <!-- back to top -->
          <a href="#0" class="cd-top"><i class="ion-android-arrow-up"></i></a>
          <!-- end back to top -->
       
          <!-- jQuery -->
          <script src="js/jquery-2.1.1.js"></script>
          <!--  plugins -->
          <script src="js/bootstrap.min.js"></script>
          <script src="js/menu.js"></script>
          <script src="js/animated-headline.js"></script>
          <script src="js/isotope.pkgd.min.js"></script>

          <!--  custom script -->
          <script src="js/custom.js"></script>
      </body>
      </html>
       
      Página - PHP
              envia.php
      <?php
      $name=   $_POST["name"];      //aqui pega os dados que foram preenchidos la no formulário com o ID NOME
      $email=  $_POST["email"];       //aqui a mesma coisa, mas com o email
      $object= $_POST["object"];     //aqui a mesma coisa, mas com o assunto
      $message=$_POST["message"];     //aqui a mesma coisa, mas com o assunto
       
      //agora vamos enviar todos esses dados usando a função mail que é do PHP

      mail("contato@horusinformatica.net.br","$object","
      Nome: $name
      Email: $email
      Assunto: $object
      Mensagem: $message","FROM:$name<$email>");
       
      /*Ele diz assim pro código: "Envia um email para meuemail@meudominio.com.br e que esse email tenha os dados que
      foram pegos em ASSUNTO, NOME, EMAIL, ASSUNTO e MENSAGEM, eles foram pegos com o MÉTODO POST e em FROM vai conter
      os dados de quem enviou o email, ou seja, la na caixa de entrada do teu e-mail vai ter isso. :)*/
       
      //aí mostramos no navegador da pessoa que enviou o email uma mensagem de sucesso
      echo "<script type='text/javascript'>window.alert('".$name."! Sua mensagem foi enviada com sucesso!');</script>";
      echo '<meta HTTP-EQUIV="Refresh" CONTENT="1; URL=index.html">';
      exit;

      ?>
       
    • Por JacsJacob
      Boa noite pessoal,

      estou montando um grafico em tempo real de dados que sao inseridos em uma tabela MYSQL...
      Estou com dificuldades de colocar as variaveis do banco de dados em um grafico de linha em javascript ou qualquer outro grafico, desde que seja um grafico de linha que eu consiga atualizar a cada 30 segundos automaticamente com o refresh da pagina (ou refresh do grafico).
      Alguem pode me ajudar por favor?

      Segue os campos da minha tabela, e o tipo de grafico que preciso criar:

       
      mysql> select * from tempdat;
      +-----+------------+----------+-----------+-------------+---------+----------------------------+
      | id  | tdate      | ttime    | zone      | temperatura | umidade | image                      |
      +-----+------------+----------+-----------+-------------+---------+----------------------------+
      |   7 | 2017-04-22 | 00:00:07 | principal |          24 |      45 | photo-21-04-2017.23.59.jpg |
      |   8 | 2017-04-22 | 00:10:03 | principal |          24 |      45 | photo-22-04-2017.00.09.jpg |
      |   9 | 2017-04-22 | 00:20:10 | principal |          24 |      44 | photo-22-04-2017.00.19.jpg |
      |  10 | 2017-04-22 | 00:30:03 | principal |          24 |      46 | photo-22-04-2017.00.29.jpg |
      |  11 | 2017-04-22 | 00:40:02 | principal |          24 |      44 | photo-22-04-2017.00.39.jpg |
      |  12 | 2017-04-22 | 00:50:02 | principal |          24 |      45 | photo-22-04-2017.00.49.jpg |
      |  13 | 2017-04-22 | 01:00:02 | principal |          24 |      45 | photo-22-04-2017.00.59.jpg |
      |  14 | 2017-04-22 | 01:10:04 | principal |          24 |      46 | photo-22-04-2017.01.09.jpg |
      |  15 | 2017-04-22 | 01:20:02 | principal |          26 |      43 | photo-22-04-2017.01.19.jpg |
      |  16 | 2017-04-22 | 01:30:02 | principal |          25 |      44 | photo-22-04-2017.01.29.jpg |



      os dados de data, tempo (hora), temperatura e umidade preciso incluir em um grafico em uma pagina php onde seja atualizado a cada 30s ou 1 min. (na tabela os dados sao incluidos a cada 10min por enquanto).
      Com a pagina abaixo eu consigo imprimir todos esses dados da tabela em uma pagina, utilizando comandos php e mysql... agora como posso colocar isso em um grafico json, javascript ou qualquer um que funcione? alguem pode me ajudar por favor??? ja tentei diversos graficos em javascript e json mas quando tento incluir as variaveis em php tenho problemas, nao estou conseguindo. 
       
      $host="localhost";
      $username="monitor";
      $password="password";
      $db_name="temps";
      $tbl_name="tempdat";
      mysql_connect("$host", "$username", "$password") or die("cannot connect");
      mysql_select_db("$db_name")or die("cannot select DB");
      $pagina=(isset($_GET['pagina']))? $_GET['pagina'] : 1;
      $sql="SELECT * FROM $tbl_name ORDER BY tdate DESC, ttime DESC";
      $data=mysql_query($sql);
      $total=mysql_num_rows($data);
      $registros=10;
      $numPaginas=ceil($total/$registros);
      $inicio = ($registros*$pagina)-$registros;
      $cmd="SELECT * FROM $tbl_name ORDER BY tdate DESC, ttime DESC limit $inicio,$registros";
      $data=mysql_query($cmd);
      $total=mysql_num_rows($data);
      while($row = mysql_fetch_array($data)){
        echo "<tr><td align=center> ";
        echo $row['tdate'] . " </td><td align=center> " . $row['ttime'] . " </td><td align=center> " . 
             $row['temperatura'] . " </td><td align=center> " . $row['umidade'] . " </td><td align=center><a onclick=popupCenter('/camera/" . $row['image'] . "','myPop1','450','450'); href=javascript:void(0);><img src=/camera/" . $row['image'] . " width=60 height=60></a></td>";
        echo "</td></tr>";
      }
        echo "</table>"; 
        echo "<p>";
          for($i = 1; $i < $numPaginas + 1; $i++) {
              echo "<font size=2 face=Arial><a href='dados_grafico.php?pagina=$i'>".$i."</a></font> ";
          }
      echo "</center>";
      mysql_close();
      ?>

      Obrigado desde já pessoal!

      Abraços!!