Два элемента управления recaptcha, один из них не работает

Question

У меня есть два элемента управления reCaptcha V2 в двух формах на одной странице, один виден, другой невидим. Все в порядке, кроме обратного вызова данных невидимого - submitSendForm() не был вызван. Как только я удалил видимое, невидимое начинает работать.

Таким образом, процесс подобен тому, как только пользователь выполнил первый видимый вызов, тогда вторая форма (на той же странице) будет отображаться с невидимой, то есть когда обратный вызов не был вызван.

Это не должно быть одно видимое, а другое невидимое. Но я обнаружил, что это легко, если вы хотите иметь несколько элементов управления.

Вот код:

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>

Answer 1

Я понял это как-то

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>

}   

Answer 2

Этот работал для меня, чистый и легкий.

Javascript

var reCaptcha1;
var reCaptcha2;


function LoadCaptcha() {
    reCaptcha1 = grecaptcha.render('Element_ID1', {
        'sitekey': 'your_site_key'
    });

    reCaptcha2 = grecaptcha.render('Element_ID2', {
        'sitekey': 'your_site_key'
    });
};

function CheckCaptcha1() {
    var response = grecaptcha.getResponse(reCaptcha1);
    if (response.length == 0) {
        return false; //visitor didn't do the check
    };
};

function CheckCaptcha2() {
    var response = grecaptcha.getResponse(reCaptcha2);
    if (response.length == 0) {
        return false; //visitor didn't do the check
    };
};

HTML

<head>
    <script src="https://www.google.com/recaptcha/api.js?onload=LoadCaptcha&render=explicit" async defer></script>
</head>

<body>
    <div id="Element_ID1"></div>
    <div id="Element_ID1"></div>
</body>