Google Recaptcha 啟用禁用提交按鈕

Question

我正在使用reCaptcha v2 invisible 。 我有一個帶有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" ，按鈕被正確禁用。

Answer 1

正如我在上面的評論中所說，您可以在呈現 Invisible 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 文檔中的此示例編寫了此示例。

Answer 2

為了解決這個問題，我升級到 reCaptcha v3，非常容易集成，現在我將提交從 <input type="submit" 更改為 ...。結果是表單現在可以完美運行。

Google Recaptcha 啟用禁用提交按鈕

問題描述

2 個解決方案

解決方案1
3 已采納 2020-01-02 16:46:48

解決方案2
0 2020-10-03 16:27:22

Google Recaptcha 啟用禁用提交按鈕

問題描述

2 個解決方案

解決方案1 3 已采納 2020-01-02 16:46:48

解決方案2 0 2020-10-03 16:27:22

解決方案1
3 已采納 2020-01-02 16:46:48

解決方案2
0 2020-10-03 16:27:22