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>

两个recaptcha控件，其中一个不起作用

2 个答案: