Two recaptcha controls, one of them is not working

I have two reCaptcha V2 controls within two forms in one page, one is visible another is invisible. All is fine except the invisible one's data-callback callback - submitSendForm() did not get called. Once I removed the visible one, the invisible one starts working.

So the process is like once user completed the first visible challenge then the second form(within same page) will show with the invisible one, that's when the call back failed to be called.

It hasn't to be one visible and another invisible. But I found this to be easy when you want to have multiple controls.

Here is the code:

using (Html.BeginForm("Verify", "CertificateValidation", FormMethod.Post, new { id = "verifyForm" }))
{
        <div class="form-group">
                <div class="g-recaptcha" data-sitekey='site-key' data-callback="enableBtn"
                         style="transform: scale(0.66); transform-origin: 0 0;">
                    </div>
            <div class="col-sm-3">
                <button type="submit" id="verify" disabled>Verify</button>
            </div>
        </div>
}

using (Html.BeginForm("Send", "CertificateValidation", FormMethod.Post, new { id = "sendForm" }))
{
        <div id='recaptcha1' class="g-recaptcha"
         data-sitekey='site-key'
         data-callback="submitSendForm"
         data-size="invisible"></div>
        <button type="submit">Send</button>

}   

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


    function submitSendForm() {
        console.log('captcha completed.');
        $('#sendForm').submit();
    }

    $('#sendForm').submit(function (event) {
        console.log('form submitted.');

        if (!grecaptcha.getResponse()) {
            console.log('captcha not yet completed.');

            event.preventDefault(); //prevent form submit
            grecaptcha.execute();
        } else {
            console.log('form really submitted.');
        }
    });


    var enableBtn = function (g_recaptcha_response) {
        $('#verify').prop('disabled', false);
    };

    $(document).ready(function () {
        $('#verify').click(function () {
            $captcha = $('#recaptcha');
            response = grecaptcha.getResponse();

            if (response.length === 0) {
                return false;
            } else {
                return true;
            }
        });
    });
</script>

1 answer

  • answered 2018-07-11 06:56 Lys

    I got it figured out somehow:

    var CaptchaCallback = function () {
            grecaptcha.render('RecaptchaField1', { 'sitekey': 'site-key', 'callback': 'enableBtn' });
            window.recaptchaField2Id = grecaptcha.render('RecaptchaField2', { 'sitekey': 'site-key', 'callback': 'submitSendForm', 'size': 'invisible' });
        };
    
        function submitSendForm() {
            $('#sendForm').submit();
        }
    
        $('#sendForm').submit(function (event) {
            if (!grecaptcha.getResponse(window.recaptchaField2Id)) {
    
                event.preventDefault(); 
                grecaptcha.execute(window.recaptchaField2Id);
            } 
        });
    using (Html.BeginForm("Verify", "CertificateValidation", FormMethod.Post, new { id = "verifyForm" }))
    {
            <div class="form-group">
    <div style="transform: scale(0.66); transform-origin: 0 0;" id="RecaptchaField1"></div>
                <div class="col-sm-3">
                    <button type="submit" id="verify" disabled>Verify</button>
                </div>
            </div>
    }
    
    using (Html.BeginForm("Send", "CertificateValidation", FormMethod.Post, new { id = "sendForm" }))
    {
            <div id="RecaptchaField2"></div>
            <button type="submit">Send</button>
    
    }