ReCaptcha: “The bind parameter must be an element

Question

ReCaptcha has stopped working on our knockout site.

I get the following error in the console:

Uncaught Error: The bind parameter must be an element or id
    at kr (recaptcha__en.js:369)
    at nr (recaptcha__en.js:373)
    at Object.or [as render] (recaptcha__en.js:374)
    at loadReCaptcha (KnockoutBindings.js:135)
    at KnockoutBindings.js:143

I have a custom binding to handle the ReCaptcha.

 <div id="reCaptcha" data-bind="reCaptcha: {key: 'my-key', callback: reCaptchaResponse}"></div>

Handled by:

ko.bindingHandlers.reCaptcha = {
    init: function (element, valueAccessor) {

        var val = ko.utils.unwrapObservable(valueAccessor()),
            key = ko.utils.unwrapObservable(val.key),
            callback = val.callback;                     

        function loadReCaptcha() {
            if (typeof grecaptcha !== "undefined") {
                grecaptcha.render(element.id, {
                    'sitekey': key,
                    'theme': 'light',
                    'callback': callback
                });
            }
            else {
                setTimeout(function () {
                    loadReCaptcha();
                }, 150);
            }
        }

        loadReCaptcha();
    }
};

This was previously working but has stopped working recently.

I have checked:

• The key is still valid
• The reCaptcha div is loaded and visible
• Tried changing the Id/using another div
• Tried passing the element instead of the id

Googling the exact error "The bind parameter must be an element or id" only gives links to the line in the recaptcha.js file.

I cannot find any information on what the error actually means or how to resolve it.

I am also getting a message in the bottom right corner of the page "This site key is not enabled for the invisible captcha." But I believe this is a side effect of the reCaptcha not loading.

Answer 1

I had exactly the same issue. It turns out that the problem is actually the "data-bind" attribute. Not sure why it "stopped" working, but I'm assuming google will probably introduce a new property with the name "bind".

I changed my binding to create a div within the element, thus ensuring that the element has no data attributes at all.

If you change your binding to this, it should work:

ko.bindingHandlers.reCaptcha = {
    init: function (element, valueAccessor) {

        var val = ko.utils.unwrapObservable(valueAccessor()),
            key = ko.utils.unwrapObservable(val.key),
            callback = val.callback;

        function loadReCaptcha() {
            if (typeof grecaptcha !== "undefined") {
                var $target = $('<div />').appendTo($(element));
                grecaptcha.render($target[0], {
                    'sitekey': key,
                    'theme': 'light',
                    'callback': callback
                });
            }
            else {
                setTimeout(function () {
                    loadReCaptcha();
                }, 150);
            }
        }

        loadReCaptcha();
    }
};