Validate captcha before sending form

Asked

Viewed 3,391 times

3

I need a very simple captcha, but it can be validated before the form is sent, how can I do it?

Currently use this:

index.html

<form method="post" action="valida.php" id="form" name="form">
    <!-- campos -->
    <div class="form-group">
        <label>Captcha*:<img src="captcha.php?l=105&a=35&tf=15&ql=5"></label>
        <input type="text" name="palavra" id="palavra" class="form-control input-lg" required>
    </div>
</form>

captcha.php

<?php
session_start();
header("Content-type: image/jpeg");

function captcha($largura,$altura,$tamanho_fonte,$quantidade_letras){
    $imagem = imagecreate($largura,$altura); 
    $fonte = "verdana.ttf";
    $preto  = imagecolorallocate($imagem,243,243,243);
    $branco = imagecolorallocate($imagem,0,151,182);

    $palavra = substr(str_shuffle("ABCDEFGHJKLMNPQRSTUVYXWZ23456789"),0,($quantidade_letras));
    $_SESSION["palavra"] = $palavra; 
    for($i = 1; $i <= $quantidade_letras; $i++){
        imagettftext($imagem,$tamanho_fonte,rand(0,0),($tamanho_fonte*$i),($tamanho_fonte + 10),$branco,$fonte,substr($palavra,($i-1),1));
    }
    imagejpeg($imagem);
    imagedestroy($imagem);
}

$largura = $_GET["l"];
$altura = $_GET["a"];
$tamanho_fonte = $_GET["tf"];
$quantidade_letras = $_GET["ql"];
captcha($largura,$altura,$tamanho_fonte,$quantidade_letras);
?>

valida.php

if ($_POST["palavra"] == $_SESSION["palavra"]) {
    //...
}

but I don’t know how to check if the captcha was filled out correctly before sending the form.

  • With that if that has down does not do that?

  • yes, but to get there the form has already been sent, I wanted him to check before sending. It’s @Miguel?

  • The problem is the definition of "already sent". " No" there is how you know if it is filled out correctly (or not), without sending a request to the server. What you can do is create an ajax for when the user type send a request to the server. Then return to javascript if it is correct or not. If it is correct the user can allow the user to submit the form. I would advise using Google Recaptcha, for such purpose, anyway.

  • I get it, but is there no way to compare what the guy is typing with what’s in session @Inkeliz? I thought about it but I don’t know if it would work or how it would work.

  • It exists, since it uses Javascript for this purpose. But what would be the real purpose of checking the captcha before sending the form? I believe there is some other solution, better than making two requests, one just to check the captcha.

  • Is that the form is integrated with an external tool to compute the data sent and this is done at the time of sending the form, so if the captcha is right or not it will compute anyway if I have to send to check.

  • Use recaptcha on google, between https://www.google.com/recaptcha/intro/index.html is easier for free and easy to do tutorial.

Show 2 more comments

2 answers

1


Well, I got it this way:

In my captcha input I call a function Cap():

<form method="post" action="#" id="form" name="form">
    <!-- campos -->
    <div class="form-group">
        <label>Captcha*:<img src="captcha.php?l=105&a=35&tf=15&ql=5"></label>
        <input type="text" name="palavra" id="palavra" class="form-control input-lg" onkeyup="Cap();" required>
    </div>
</form>

The function Cap() in turn send the form via ajax to check the captcha and enable or disable the send button of the form according to the reply.:

<script>
    function Cap(){
        var form = $("#form").serializeArray();
        var url = "valida.php";
        if($("#palavra").val().length){
            $.post(url, form, function(data){
                if(data == 'error'){
                    $("#submit").prop("disabled", true);
                }else{
                    $("#submit").prop("disabled", false);
                }
            });
        }else{
            $("submit").prop("disabled", true);
        }
    }
</script>

Valida.php looked like this:

<?php
session_start();
if ($_POST["palavra"] == $_SESSION["palavra"]) {
    echo "success";
} else {
    echo "error";
}
?>

captcha.php remained the same way. I don’t know if it’s the best way to do it, but it’s working well and meeting the current need.

1

In the method or function that handles the sending of the form, you can consult the Captcha via Ajax, then, if it is OK, you can submit the other form data.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.