How do I stop Google reCAPTCHA from showing alerts?

Question

I have some forms on the website and Google invisible reCAPTCHA. From time to time something goes wrong and an alert is shown: "Cannot contact reCAPTCHA. Check your connection and try again.". I tried to hide those messages by overriding alert function:

<script>
    var _alert = window.alert;
    window.alert = function(text) {
        if(text.indexOf("reCAPTCHA") === -1){
            _alert(text);
        }
        return true;
    };
</script>

However, it doesn't work. Alerts are still shown. This is the code I use to call reCAPTCHA. I use real site key instead of MY_SITE_KEY:

<script>
    var widgetNewsletter;
    var widgetRegistration;
    var captchaCallback = function() {
        widgetNewsletter = grecaptcha.render('subscriptionSubmit', {
            'sitekey' : 'MY_SITE_KEY',
            'callback' : function() {
                document.getElementById("newsletter-validate-detail").submit();
            }
        });
        if(document.getElementById("registerFormSubmit") !== null) {
            widgetRegistration = grecaptcha.render('registerFormSubmit', {
                'sitekey' : 'MY_SITE_KEY',
                'callback' : function() {
                    document.getElementById("form-validate").submit();
                }
            });
        }
    };
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=captchaCallback&render=explicit' async="false" defer></script>

How can I stop alerts from appearing?

This has been already answered: https://stackoverflow.com/questions/48003527/cannot-contact-recaptcha-check-your-connection-and-try-again — Pedro Madrid, Jan 30 '18 at 11:46
The link in the previous comment is not the answer to this question. That deals with stopping the error from occurring. This question is about stopping errors from appearing as an Alert() *yuck!*. — jwinn, Feb 05 '18 at 14:26

score 3 · Answer 1 · answered Feb 16 '18 at 16:53

According to the document, you can pass error callback when you call the render() function. The error callback will be executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. So your code will look like this

widgetNewsletter = grecaptcha.render('subscriptionSubmit', {
        'sitekey' : 'MY_SITE_KEY',
        'callback' : function() {
            document.getElementById("newsletter-validate-detail").submit();
        },
        'error-callback': function(){
          //show error message
        }
    });

How do I stop Google reCAPTCHA from showing alerts?

1 Answers1