Require User to click google's new recaptcha before form submission

Question

I am using google's new recaptcha inside my form (HTML5): https://www.google.com/recaptcha

Is there a way to check and mark recaptcha as required before form submission? I want to validate this on client-side instead of server side. That way, I don't have to go back to the form and warn the user about not entering anything for the captcha.

Any javascript that I can use to check whether users enter anything in recaptcha?

Answer 1

You can check the textarea field with id g-recaptcha-response . You can do as following:

$("form").submit(function(event) {

   var recaptcha = $("#g-recaptcha-response").val();
   if (recaptcha === "") {
      event.preventDefault();
      alert("Please check the recaptcha");
   }
});

Hope this helps you.

Answer 2

A vanilla JavaScript implementation using parts of both Ankesh's and Lammert's solution:

var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
    if (grecaptcha.getResponse() === '') {                            
      event.preventDefault();
      alert('Please check the recaptcha');
    }
  }
, false);

Credit to for form submit listener code: How can I listen to the form submit event in javascript?

Answer 3

grecaptcha.getResponse() - Returns the response for the Recaptcha. You can check this in condition such as

grecaptcha.getResponse(opt_widget_id) === ""

Optional widget ID, defaults to the first widget created if unspecified.

Ref: https://developers.google.com/recaptcha/docs/display

Answer 4

I tried to improve rylanb's answer. The code below find all the forms in the page that have g-captcha activated and prevent from submission. Note: It assumes that your div.g-recaptcha is the child of form

const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
    const formParentElement = form.parentElement;

    formParentElement.addEventListener("submit", e => {
        if (grecaptcha.getResponse() === '') {
            e.preventDefault();
            alert('Please check the recaptcha');
        }
    }, false)
});

Answer 5

Working solution in 2022

Personally, I was not able to get any of the above solutions to work with my captcha. So I figured I would share my current working solution for those facing the same issue.

My notes in the .js should explain the solution thoroughly.

JavaScript

// By default do not allow form submission.
var allow_submit = false

function captcha_filled () {
    /*
     * This is called when Google get's the recaptcha response and approves it.
     * Setting allow_submit = true will let the form POST as normal.
     * */

    allow_submit = true
}

function captcha_expired () {
    /*
     * This is called when Google determines too much time has passed and expires the approval.
     * Setting allow_submit = false will prevent the form from being submitted.
     * */

    allow_submit = false
}


function check_captcha_filled (e) {
    console.log('verify-captcha')
    /*
     * This will be called when the form is submitted.
     * If Google determines the captcha is OK, it will have
     * called captcha_filled which sets allow_submit = true
     * If the captcha has not been filled out, allow_submit
     * will still be false.
     * We check allow_submit and prevent the form from being submitted
     * if the value of allow_submit is false.
     * */

    // If captcha_filled has not been called, allow_submit will be false.
    // In this case, we want to prevent the form from being submitted.
    if (!allow_submit) {
        // This call prevents the form submission.
        // e.preventDefault()

        // This alert is temporary - you should replace it with whatever you want
        // to do if the captcha has not been filled out.
        alert('ERROR: Please verify you are human by filling out the captcha')

        return false
    }
    captcha_expired()
    return true
}

HTML

<form action="post" onsubmit="return check_captcha_filled()">
<!-- form items -->
<div class="g-recaptcha"
   data-callback="captcha_filled"
   data-expired-callback="captcha_expired"
   data-sitekey="your site key">
</div>
</form>

Answer 6

Easiest way to do this is by changing type of button.

    <button class="theme-btn" type="button" onclick="checkForm()" id="sign_up_button" >

now create a Java Script Function to change the type of submit on validation.

<script type="text/javascript">

// NoCaptcha Function

    function checkForm(){
      
        if(!document.getElementById("g-recaptcha-response").value){
            alert("Please Prove ! You're not a Robot");
            return false;
        }else{
            document.getElementById("sign_up_button").type = "submit";                
            return true;
        }
    }

 </script>