1

Estou a tentar fazer um formulário com a validação do recaptcha da Google.

O que acontece é que se não validar o recaptcha dá a mensagem de erro a pedir para "checkar" o recaptcha mas se eu checkar o recaptcha ele dá o mesmo erro a pedir ao utilizador para checkar o recaptcha

Formulário:

<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>

<form name="sentMessage" id="contactForm" novalidate>
                    <div class="text-center">
                          <h2 class="section-heading">Get In Touch</h2>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                             <div class="form-group">
                                <input type="tel" class="form-control" placeholder="Your Phone" id="phone">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Your Company" id="company">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Your Country" id="country">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-12 text-right">
                            <div id="success"></div>

                            <div class="g-recaptcha col-md-4 nopadding" data-sitekey="6LeWfSATAAAAAJXNf_Ys78pY9FwXThC6t5JBqt0L"></div>
                            <button type="submit" class="btn btn-xl">Send Message</button>
                        </div>
                    </div>
                </form>

AJAX:

 $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var name = $("input#name").val();
        var email = $("input#email").val();
        var phone = $("input#phone").val();
        var company = $("input#company").val();
        var country = $("input#country").val();
        var message = $("textarea#message").val();
         $.ajax({
            url: "../mail/form-handler.php",
            type: "POST",
            data: {
                name: name,
                phone: phone,
                email: email,
                company: company,
                country: country,
                message: message
            },
            cache: false,
            success: function(data) {
                if (data === "true") {
                     // Success message
                    $('#success').html("<div class='alert alert-success text-left'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. Thank you for contacting us. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                } else {
                     // Fail message
                    jQuery('#success').html("<div class='alert alert-danger'>");
                    jQuery('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
                    jQuery('#success > .alert-danger').append("<strong>You can't proceed ! Please mark the recaptcha to confirm you are human.");
                    jQuery('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                }

            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry, it seems that server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        });
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

PHP

<?php
 // busca a biblioteca recaptcha
require_once "../helpers/recaptchalib.php";
// sua chave secreta
$secret = 'SECRET KEY';

// resposta vazia
$response = null;

// verifique a chave secreta
$reCaptcha = new ReCaptcha($secret);

// se submetido, verifique a resposta
if ($_POST["g-recaptcha-response"]) {
  $response = $reCaptcha->verifyResponse(
    $_SERVER["REMOTE_ADDR"],
    $_POST["g-recaptcha-response"]
);

 }

 if ($response != null && $response->success) {
echo "true";
} else {
echo "false";
$errors[] = "Captcha mutch be filled.";
}

1 Resposta 1

1

Você pode resetar o captcha via Javascript.

grecaptcha.reset();

Inclua a função grecaptcha.reset(); abaixo do $('#contactForm').trigger("reset"); por exemplo. Isso irá fazer com que o Captcha seja "apagado" e exige que o usuário preencha novamente.

Isso funciona somente no novo ReCaptcha!

O erro mencionado ocorre porque não se pode usar um mesmo captcha para ser validado novamente.

Uma outra solução menos incomoda para os usuários é definir via SESSION que o usuário já usou aquele captcha e que ele está correto. Se preocupe em restringir o SESSION por IP, User Agent e também pelo proprio valor do $_POST["g-recaptcha-response"] e defina um tempo de vida curto. Caso não tome esses cuidados o Catpcha será inútil.

Você pode também unir ambas as soluções. ;)

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .