I'm trying to implement Google's Invisible reCAPTCHA in a HTML form in a Wordpress website.

In the head

First, I have the script that sets up the callbacks and binds the submit event of the form to the verification:

jQuery(document).ready(function() {
  var valid = false;

  window.recaptchaOkay = function(token) {
    valid = true;
    jQuery('#cadastro').submit();
  };

  document.getElementById('cadastro').addEventListener('submit', function validate(event) {
    if (valid) {
      return true;
    }

    var cap = document
        .getElementById('cadastro')
        .querySelector('.g-recaptcha');
    grecaptcha.execute(cap);

    event.preventDefault();
    return false;
  });
});

Then, I load the reCAPTCHA script, precisely as indicated in the documentation:

<script src=".js" async defer></script>

In the body

And this is the form I'm using:

<form action="/" method="post" id="cadastro">
    <div
        class="g-recaptcha"
        data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
        data-callback="recaptchaOkay"
        data-size="invisible"
        id="cadastro-captcha">
    </div>
    <button type="submit" id="cadastro-submit">Enviar</button>
</form>

What happens

I fill the form, submit it, and the following error is thrown (in the line with grecaptcha.execute):

Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]

Also tried just passing the cadastro-captcha ID directly to that function as a string (e.g. grecaptcha.execute("cadastro-captcha")), yet the same error happens (bar the id being different, obviously). Equivalently, if I pass no argument, the same error happens, except it refers to undefined.

I'm trying to implement Google's Invisible reCAPTCHA in a HTML form in a Wordpress website.

In the head

First, I have the script that sets up the callbacks and binds the submit event of the form to the verification:

jQuery(document).ready(function() {
  var valid = false;

  window.recaptchaOkay = function(token) {
    valid = true;
    jQuery('#cadastro').submit();
  };

  document.getElementById('cadastro').addEventListener('submit', function validate(event) {
    if (valid) {
      return true;
    }

    var cap = document
        .getElementById('cadastro')
        .querySelector('.g-recaptcha');
    grecaptcha.execute(cap);

    event.preventDefault();
    return false;
  });
});

Then, I load the reCAPTCHA script, precisely as indicated in the documentation:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

In the body

And this is the form I'm using:

<form action="https://example.com/" method="post" id="cadastro">
    <div
        class="g-recaptcha"
        data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
        data-callback="recaptchaOkay"
        data-size="invisible"
        id="cadastro-captcha">
    </div>
    <button type="submit" id="cadastro-submit">Enviar</button>
</form>

What happens

I fill the form, submit it, and the following error is thrown (in the line with grecaptcha.execute):

Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]

Also tried just passing the cadastro-captcha ID directly to that function as a string (e.g. grecaptcha.execute("cadastro-captcha")), yet the same error happens (bar the id being different, obviously). Equivalently, if I pass no argument, the same error happens, except it refers to undefined.

• javascript
• wordpress
• recaptcha
• invisible-recaptcha

• Have you tried calling grecaptcha.execute()? (Without any params) – Black Commented Nov 20, 2017 at 21:54
• @Black Yes. I just get the same error, with undefined as client ID. – Kroltan Commented Nov 20, 2017 at 21:55
• At the moment you are passing the whole div as a parameter, thats not how it is supposed to. You should either pass the id of the div, or nothing (then it will just take the first widget created). – Black Commented Nov 20, 2017 at 22:21
• @Black I stated in the question. Passing just the ID does the same. – Kroltan Commented Nov 20, 2017 at 22:36

2 Answers 2

Try this one :--

The grecaptcha.reset() method accepts an optional widget_id parameter, and defaults to the first widget created if unspecified. A widget_id is returned from the grecaptcha.render() method for each widget created. So you need to store this id, and use it to reset that specific widget:

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

If More information then Read google recaptcha docs:-- https://developers.google.com/recaptcha/docs/display#js_api

Using the container element id will get you the error you're getting because that's not what the getResponse method is expecting.

You should instead follow the undocumented behavior of the render method:

const widget_id = grecaptcha.render(
  container,
  parameters
)

(source: https://developers.google.com/recaptcha/docs/display#js_api)

The method upon invocation actually returns a widget_id which needs to be used to reference the correct widget in case of multiple ones exist on the page.

Cudos to @dewd for pointing this out in a comment.