Validate Captcha in PHP by Jquery

Question

How can I make so that the user enters the wrong captcha, the validation occurs without giving the post? I have the following code:

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

The result is this:

it is possible to create captcha in PHP and validate with Jquery?

I tried to do it that way, but it doesn’t work:

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

Answer 1

You can use the data attribute to easily take this value and make the comparison. To do this just add the data attribute in your div that contains captcha and then you can perform the comparison with jquery

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

and to get this value just do

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

A functional example:

$("#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>

You can still use the toLowerCase not to differentiate between upper and lower case characters

 $("#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>