如何在提交按钮上验证谷歌reCaptcha

Question

On Joomla 3, I have added the new Google reCaptcha on the form page, but the Google reCaptcha doesn't validate with the submit button. Though reCaptcha is right there on the form page, I can still submit the form without ticking the checkbox. Basically the submit button doesn't validate/link up with the reCaptcha.

As per google reCaptcha direction, I have done the following:

<script type="text/javascript" src='https://www.google.com/recaptcha/api.js'></script>

And then place the reCaptcha div in the form page where I want to show:

<div class="g-recaptcha" data-sitekey="6LcOrgsTAAAAAEKWXDbi08wBM-V7ELRwpay76OA1"></div>

And the submit button code in the following:

<button type="button" class="btn btn-success" onclick="Joomla.submitbutton('payment')"><?php echo JText::_('COM_JKPAYMENT', true); ?></button>  

So can you tell me, what condition I need to set so that the Form submit is validate with the reCaptcha.

Answer 1

You need to call grecaptcha.getResponse(). The id for my submit button is btnSubmit.

<script>
    $("#btnSubmit").click(function () {
        var response = grecaptcha.getResponse();
        if(response.length != 0) //validation successful
           Joomla.submitbutton('payment');
        else
         //validation failed
    });
</script>