Validate captcha before sending form

Question

Validate captcha before sending form

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

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

I 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 do not know how to check if the captcha was filled out correctly before submitting the form.

php html captcha session

asked by anonymous 15.08.2016 / 22:22

2 answers

1

In the method or function that handles the submission of the form, you can query Captcha via Ajax , so if you are OK, you can submit the other form data.

19.08.2016 / 14:18

Text Cleanup and Standardization Real-time window update problem

score 1 · Accepted Answer

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 sends the form via ajax to check the captcha and enable or disable the submit form button according to the response.

<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 looks like this:

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

The captcha.php remained the same. I do not know if this is the best way to do it, but it's working well and meeting the current need.