how to Set reCaptcha v2 field as required ( URGENT )

[Mihran Hayrapetyan]

I spent hours but did not find any solution for this how can I set reCaptcha v2 as required field. currently everyone able to fill the form and submit without recpatcha. I'm sure everything is done properly sitekey is correct, js loaded and widget added correctly

[Valery Sushko]

Same thing for me. It's completely not obvious. It's possible to prevent posting form if grecaptcha.getResponse() is empty string but it's still not clear how to mark recaptcha as not valid and force it to display message.

[Christian Knörnschild]

Hi!

here is a way that worked for me:

- as it says in doc's that your should save the used captcha-response to prevent multiple use, i came to the conclusion that it can only be checked reliable serverside.

so we hang on form's submit,  ask the server, server shall tell us if g-recaptcha-response was posted, then we show to the user.. in this case alert...

begin jscode: 

$(function() {

    //hang on event of form 

    $("#responseform").submit(function(e) {

        //prevent Default functionality

        e.preventDefault();

        //get the action-url of the form

        var actionurl = e.currentTarget.action;

        //do your own request an handle the results

        $.ajax({

                url: actionurl,

                type: 'post',

                dataType: 'json',

                data: $("#responseform").serialize(),

                success: function(data) {

                    

if(data.status == "error") {

alert("please fill in the captcha....");

}

else  {

alert("ok, got your message! thank you!");

}

                },

fail: function(data) {

}

        });

    });

});

-- end code

here on server side ( php )

begin code: 

$resp = $this->input->post("g-recaptcha-response");

//if the g-recaptcha-response is not in post, or set to unreasonable value, abort.

if($resp == null || strlen($resp) <  2) {

$response_array['message'] = 'captcha was not solved.';

$response_array['status'] = 'error'; 

header('Content-type: application/json');

echo json_encode($response_array);

die();

}

-- end code

since im also playing with this i put something together here:

https://github.com/womd/Recaptcha/

hope  it helps someone...

greetings

chris

[Christian Knörnschild]

...

if(data.status == "error") {

alert("please fill in the captcha....");

                                                      grecaptcha.reset();

}

else  {

alert("ok, got your message! thank you!");

}

...

[Valery Sushko]

Thank you for the response Christian. But it's not what we are looking for.

Your suggestion is to submit form with ajax. But we want to prevent any communication with server if user has not solved captcha. One way to do it is to override submit action (as you've shown) and check whether grecaptcha.getResponse() is not empty. And that might be a solution. But grecaptcha does not have method which allows us to show error message inside recaptcha. We should invent something (alert, display message in other place or something else). It is pretty weird that recaptcha client API does not have that possibilities.

I thought I can hack it a bit and use their markup for error message but it's not possible (or not trivial) as recaptcha hosts in iframe.

[Valery Sushko]

Finally we've solved the issue. We put hidden input and span which displays validation message. We attached required validator on that field. We unignored this hidden from jQuery validation loop.

Also we subscribed on recaptcha validation and expiration (data-callback and data-expired-callback). Once recaptcha validates or expired we set or clear the hidden.

This way we made recaptcha required and show our custom message.

[ma...@eldercareresourceplanning.org]

Hi Valery! I have the same problem you had. I am not web designer by training though and I've struggled following your solution. Would it be possible for you to show an example of the code you used? Thanks a lot for sharing the solution!