谷歌验证码使提交按钮无效

Question

谷歌验证码使提交按钮无效

6

我正在使用 reCaptcha v2 不可见。我有一个简单的表格，其中包含一个 disabled 的提交按钮。Google reCAPTCHA 启用了我的禁用按钮。

<script src="https://www.google.com/recaptcha/api.js"></script>

<form action="/action_page.php" id="referral-form">
    First name:
    <br>
    <input type="text" name="firstname">
    <br>
    Last name:
    <br>
    <input type="text" name="lastname">
    <br>
    <input type="submit" id="form-submit-btn" disabled="disabled" class="g-recaptcha" data-callback='onSubmit' data-sitekey="***************" value="Submit">
</form>

function onSubmit() {
    if (grecaptcha.getResponse() !== "") {
        $('#referral-form').submit();
    }
        grecaptcha.reset();
}

当我移除 class="g-recaptcha" 后，按钮就正确地被禁用了。

- KidBilly

我认为Recaptcha启用了它，否则就无法提交。也许你应该在Recaptcha加载完成后进行回调，并从那里禁用按钮，然后依赖其他输入。 - Mihail Minkov

没问题。请提供一个可工作的例子作为答案，我会接受它。 - KidBilly

2个回答

0

为了解决这个问题，我已经升级到reCaptcha v3，非常容易集成，现在我将提交方式从

- Mohamed Masmoudi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mihail Minkov · Accepted Answer

正如我在上面的评论中提到的，您可以在不可见的reCAPTCHA渲染时使用回调函数。

尝试此代码，并告诉我是否有效：

<!doctype html>
<html>
  <head>
    <script>
        var onSubmit = function(token) {
            console.log(token);
            // You can check token here and decide what to do
        };

        var onloadCallback = function() {
            grecaptcha.render('form-submit-btn', {
                'sitekey' : '***************',
                'callback' : onSubmit
            });
            document.getElementById('form-submit-btn').disabled = true;
        };

        /////
        // code to enable your button when you have content in the inputs
        /////
    </script>
  </head>
  <body>
      <form action="/action_page.php" id="referral-form">
          First name:
         <br>
         <input type="text" name="firstname">
         <br>
         Last name:
         <br>
         <input type="text" name="lastname">
         <br>
         <input type="submit" id="form-submit-btn" class="g-recaptcha" value="Submit">
      </form>

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

我基于你的代码和Google Recaptcha文档中的这个例子创建了这个示例。