Google recaptcha not reloading on page after failed validation?

Question

I have implemented recaptcha v2 in my form.php but when i click submit without validating the captcha the page reloads showing the echo response of Please go back and make sure you check the security CAPTCHA box. but the captcha form is no longer visible but there in the html?

I have tried grecatcha.reset() but still cant get it to work

the code is a s follows

Thanks in advance

html:

    <?php
    include ('form_process.php');

    ?>

    <div class="grey">
            <div class="container-contact">
                <form id="contact" method="post">
                    <div id="column-contact-left">
                    <div class='contact-logo'></div>
                    <h3>Contact the Devon Food Movement</h3>
                    <fieldset id="field-no-ui">
                        <input placeholder="Your name" type="text" tabindex="1" name="name1" value="<?= $name ?>" >

                    </fieldset>
                    <span class="error"><?= $name_error ?></span>
                    <fieldset id="field-no-ui">
                        <input placeholder="Your Email Address" type="text" name="email" value="<?= $email ?>" tabindex="2" >

                    </fieldset>
                    <span class="error"><?= $email_error ?></span>
                    </div>
                    <div id="column-contact-right">
                    <fieldset id="field-no-ui">
                        <textarea id="field-no-ui" placeholder="Type your Message Here...." name="message" value="<?= $message ?>" tabindex="3" ></textarea>
                    </fieldset>
                    <div class="g-recaptcha" data-sitekey="6LfJtkcUAAAAAE_7Ob_7BVMkaZMXX-dH-V6uqjCn" ></div>
                    <span class="sent"><?= $sent; ?></span>
                    <fieldset id="field-no-ui">
                        <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                    </fieldset>
                    </div>
                </form>
            </div>
    </div>

form_process.php

    <?php

    function post_captcha($user_response) {
        $fields_string = '';
        $fields = array(
            'secret' => 'secret',
            'response' => $user_response
        );
        foreach($fields as $key=>$value)
            $fields_string .= $key . '=' . $value . '&';

        $fields_string = rtrim($fields_string, '&');

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
        curl_setopt($ch, CURLOPT_POST, count($fields));
        curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);

        $result = curl_exec($ch);
        curl_close($ch);

        return json_decode($result, true);
    }

    $res = post_captcha($_POST['g-recaptcha-response']);

    $name_error = $email_error = "";
    $name = $email = $message = $sent = "";

    if (isset($_POST['submit']) AND (!$res['success'])) {
        // What happens when the CAPTCHA wasn't checked
        echo '<p style="margin-top: 0">Please go back and make sure you check the security CAPTCHA box.</p><br>';
    } else if ($_SERVER["REQUEST_METHOD"] == "POST") {
        if (empty($_POST["name1"])) {
            $name_error = "Name is required";
        } else {
            $name = test_input($_POST["name1"]);
            // check if name only contains letters and whitespace

            if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
                $name_error = "Only letters and white space allowed";
            }
        }

        if (empty($_POST["email"])) {
            $email_error = "Email is required";
        } else {

            $email = test_input($_POST["email"]);
            // check if e-mail address is well-formed
            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                $email_error = "Invalid email format";
            }
        }

        if (empty($_POST["message"])) {
            $message = "";
        } else {
            $message = test_input($_POST["message"]);
        }

        if ($name_error == '' and $email_error == '' ){
            $message_body = '';
            unset($_POST['submit']);

            foreach ($_POST as $key => $value){
                $message_body .=  "$key: $value\n";
            }

            $email = $_POST['email'];
            $to = '@gmail.com';
            $subject = 'Contact Form Submit';
            $headers = 'From:' . $email . "\n" . 'Reply-to: ' . $email . "\n"  ;
            if (mail($to, $subject, $message, $headers)) {
                $sent = "Message sent";
                $name = $email = $message = '';
            }
        }
    }
    function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    ?>

It would help to see the javascript you're using to render the captcha. In general, for the best user experience you should probably prevent the user from clicking submit unless they've satisfied the captcha, for that you could use the second or third method listed at developers.google.com/recaptcha/docs/verify — Paul Degnan
Thanks for your reply, i imagine you mean the script. I am using script src='google.com/recaptcha/api.js'></script — Paul Stephen Davis
I will start looking into holding the submit button until the captcha is verified a that seems like a more logical response than reloading the whole page — Paul Stephen Davis

Paul Stephen Davis Paul Stephen Davis · Accepted Answer · 2018-03-02T15:13:49

I moved the script for recaptcha into the form.php file and placed directly under recaptcha div and now loads recaptcha everytime

Google recaptcha not reloading on page after failed validation?

1 Answers