0

Como eu posso fazer para que, o usuário digitar o captcha errado, a validação ocorrer sem dar o post? Tenho o seguinte código:

<?php session_start(); ?>


    ....
    <div class="control-group">
       <div class="controls">
          <label>Digite o código abaixo:</label>
          <?php
          $codigoCaptcha = substr(md5(time()) ,0, 5);
          if(!isset($_SESSION["Captcha"])){
             $_SESSION["Captcha"] = $codigoCaptcha;
          }
           echo "<div id='captcha'>".$_SESSION["Captcha"]."</div>";
          ?>
          <input type="text" class="form-control" name="Captcha" title="Digite o código <?php echo $_SESSION["Captcha"]; ?>" required />
       </div>
    </div>
<div align="center" style="margin-top: 10px">
<button type="submit" id="submit" class="btn btn-primary btn-lg col-lg-12" title="Enviar mensagem">Enviar</button><br />
</div>

O resultado é esse:

inserir a descrição da imagem aqui

é possível criar o captcha em PHP e validar com Jquery?

Tentei fazer dessa forma, mas não funciona:

   <script>
          $(function(){
            $("#submit").click(function(){
            var captcha = $(this).attr('captcha');
            if(captcha != <?php echo $_SESSION["Captcha"]; ?>){
               alert("Caracteres errados");
            }else{
              alert("OK");  
            }
        });
    });
 </script>

1 Resposta 1

2

Você pode usar o data attribute para pegar facilmente esse valor e fazer a comparação. Para isso é só adicionar o data attribute na sua div que contém o captcha para depois poder realizar a comparação com jQUery

echo "<div id='captcha' data-valor='".$_SESSION["Captcha"]."'>".$_SESSION["Captcha"]."</div>";

e para pegar esse valor é só fazer

var captcha = $("#captcha").data("valor");

Um exemplo funcional:

$("#enviar").click(function(){
    var captcha = $("#captcha").data("valor");
    var input = $("input[name='Captcha']").val();
    if(input == captcha){
        console.log("iguais");
    }else{
        console.log("diferentes");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
   <div class="controls">
      <label>Digite o código abaixo:</label>
      <div id='captcha' data-valor="6dc78">6dc78</div>
      <input type="text" class="form-control" name="Captcha" title="Digite o código 6dc78" required />
   </div>
   <button type="button" id="enviar"> Enviar </button>
</div>

Você ainda pode usar o toLowerCase para não diferenciar os caracteres maiúsculos e minúsculos

 $("#enviar").click(function(){
    var captcha = $("#captcha").data("valor");
    var input = $("input[name='Captcha']").val();
    if(input.toLowerCase() == captcha.toLowerCase()){
        console.log("iguais");
    }else{
        console.log("diferentes");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
   <div class="controls">
      <label>Digite o código abaixo:</label>
      <div id='captcha' data-valor="6dc78">6dc78</div>
      <input type="text" class="form-control" name="Captcha" title="Digite o código 6dc78" required />
   </div>
   <button type="button" id="enviar"> Enviar </button>
</div>

1
  • Perfeito JrD. Funcionou! Muito obrigado.
    – user24136
    12/04/2019 às 14:09

Você deve fazer log-in para responder a esta pergunta.