RecaptchaV2 启用/禁用提交

Posted 2023-02-22

【中文标题】RecaptchaV2 启用/禁用提交

【英文标题】：RecaptchaV2 enable/disable submit

【发布时间】：2017-12-02 22:14:04

【问题描述】：

我的网络中有一个表单，但我收到了一些跨度，因此我添加了 Google RecaptchaV2 并停止了跨度，但我想禁用提交按钮，直到检查了 Recaptcha 并且用户证明这是人类。

RecaptchaV2 在 iframe 中运行，我如何读取元素或属性以禁用提交？

在 iframe 内部有一个跨度，一旦验证就会更改内容： 来自：

<span id="recaptcha-accessible-status">Recaptcha requires verification</span>

到：

<span id="recaptcha-accessible-status">You are verified</span>

所以阅读我认为可以使用 Jquery 禁用/启用提交按钮，尝试使用 content() 读取它但无法访问 iframe 内容，有什么想法吗？

谢谢！

【问题讨论】：

到目前为止你尝试了什么？

我在帖子中包含了更多详细信息。

How can I validate google reCAPTCHA v2 using javascript/jQuery?的可能重复

知道了，非常感谢！

【参考方案1】：

这是答案，这只是在检查时禁用/启用提交按钮：

使它可以在一页中使用不同的表单，但未经测试，欢迎提出任何建议/更改。

呼叫：

<div class="g-recaptcha" data-sitekey="KEY-HERE" data-callback="correctCaptcha"></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>

data-callback="correctCaptcha" 是杰作。

js:

$("form").each(function() 
    $(this).find(':input[type="submit"]').prop('disabled', true);
);
function correctCaptcha() 
    $("form").each(function() 
        $(this).find(':input[type="submit"]').prop('disabled', false);
    );

【讨论】：

很好的解决方案。对于 vanilla JS，我只是给了我的提交按钮一个 ID，并在正确的Captcha 函数中使用了这一行：document.getElementById("submitBtn").disabled = false;

【参考方案2】：

这就是我最终做的：

  var verifyCallback = function(response) 
    $('.contactForm :input[type="submit"]').prop('disabled', false);
  ;

  var onloadCallback = function()         
    grecaptcha.render('contactForm', 
      'sitekey' : 'SITE-KEY-HERE',
      'callback' : verifyCallback,
      'theme' : 'light'
    );
  ;