如何將 reCAPTCHA 設為必填字段？

Question

我正在使用 Google reCAPTCHA，並且已經能夠將 CAPTCHA 組件添加到表單內的頁面中。 但是當我提交表單時，沒有進行驗證以檢查 CAPTCHA 是否已解決。

提交表單時如何驗證驗證碼組件是否已解決？ 或者，換句話說，我如何使我的 CAPTCHA 組件成為必需的？

Answer 1

如果你想使用原生 html5 彈出窗口，比這里的解決方案

JavaScript：

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

CSS：

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}

Answer 2

我遇到了和你一樣的問題，用這種方法解決了：

首先聲明一個存儲1或0的變量，這取決於用戶是否正確填寫了驗證碼。

var allowSubmit = false;

然后，您需要一個在用戶正確填寫 reCapcha 時執行的函數：

function capcha_filled () {
    allowSubmit = true;
}

...以及在 reCapcha 會話到期時執行的函數：

function capcha_expired () {
    allowSubmit = false;
}

要告訴 reCapcha 您的函數（回調），請在您的 html 中設置這些data-屬性：

<div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

或者，如果您使用顯式加載：

  var onloadCallback = function() {
    grecaptcha.render('your_div_id', {
      'sitekey' : 'your_site_key',
      'callback': capcha_filled,
      'expired-callback': capcha_expired,
    });
  };

您還需要一個回調來提交表單：

function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

最后在表單中添加onsubmit屬性：

<form action="..." onsubmit="check_if_capcha_is_filled">

---

注意：如評論中所述，仍然需要服務器驗證。 該代碼可防止意外提交表單，除非驗證碼已填寫，並且只是為了方便用戶。

Answer 3

我發現這是一種快速簡便的方法。 將此添加到您的標題中：

<script>
window.onload = function() {
  var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please complete the captcha");
  }
}
</script>

這僅適用於 HTML5，並且（或應該）受以下瀏覽器支持：http: //caniuse.com/#feat=form-validation

（Chrome 中的 JS 控制台僅在 Google Chrome 中顯示此錯誤消息：“無效的表單控件” ，我無法解決此問題。希望其他人能改進此響應。）

Answer 4

我檢查了#g-recaptcha-response 的存在：

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

這真的應該是文檔的一部分......

Answer 5

不確定您是否已經解決了這個問題，但您可以使用插件來驗證 Google 重新驗證碼：http: //formvalidation.io/addons/recaptcha2/

Answer 6

如果您想要更友好和更具描述性的消息，您可以添加一個必需的復選框。 這將確保 html5 彈出窗口顯示如下內容： “如果您想繼續，請選中此框”

<div class="captcha">
   <div class="g-recaptcha" data-sitekey="Your Site Key" data-callback="removeFakeCaptcha"></div>
   <input type="checkbox" class="captcha-fake-field" tabindex="-1" required>
</div>

添加代碼以在完成后刪除假驗證碼

window.removeFakeCaptcha = function() {
   document.querySelector('.captcha-fake-field').remove();
}

然后在 css 上隱藏復選框並將其定位到驗證碼框：

.captcha {
  position: relative;
}
.captcha-fake-field {
  background: transparent;
  bottom: 0;
  border: none;
  display: block;
  height: 1px;
  left: 12px;
  width: 1px;
  position: absolute;
  z-index: -1;
}

Answer 7

2022 年工作解決方案

就個人而言，我無法獲得上述任何解決方案來使用我的驗證碼。 所以我想我會為那些面臨同樣問題的人分享我目前的工作解決方案。

接受的答案沒有驗證碼何時過期的驗證技術，下面的解決方案解決了這個問題。

我在.js中的注釋應該徹底解釋解決方案。

JavaScript

// By default do not allow form submission.
var allow_submit = false

function captcha_filled () {
    /*
     * This is called when Google get's the recaptcha response and approves it.
     * Setting allow_submit = true will let the form POST as normal.
     * */

    allow_submit = true
}

function captcha_expired () {
    /*
     * This is called when Google determines too much time has passed and expires the approval.
     * Setting allow_submit = false will prevent the form from being submitted.
     * */

    allow_submit = false
}


function check_captcha_filled (e) {
    console.log('captcha-verified')
    /*
     * This will be called when the form is submitted.
     * If Google determines the captcha is OK, it will have
     * called captcha_filled which sets allow_submit = true
     * If the captcha has not been filled out, allow_submit
     * will still be false.
     * We check allow_submit and prevent the form from being submitted
     * if the value of allow_submit is false.
     * */

    // If captcha_filled has not been called, allow_submit will be false.
    // In this case, we want to prevent the form from being submitted.
    if (!allow_submit) {
        // This call prevents the form submission.
        // e.preventDefault()

        // This alert is temporary - you should replace it with whatever you want
        // to do if the captcha has not been filled out.
        alert('ERROR: Please verify you are human by filling out the captcha')

        return false
    }
    captcha_expired()
    return true
}

HTML

<form action="post" onsubmit="return check_captcha_filled()">
<!-- form items -->
<div class="g-recaptcha"
   data-callback="captcha_filled"
   data-expired-callback="captcha_expired"
   data-sitekey="your site key">
</div>
</form>

Answer 8

我覺得這很有幫助：

<div class="g-recaptcha myPopover" data-sitekey="Your Key" 
        data-callback="recaptchaCallback">

使用以下代碼向 data-callback="recaptchaCallback" 添加一個函數：

var recaptchachecked=false; 
function recaptchaCallback() {
    recaptchachecked = true;
}

還有一個函數是你返回值以在其他 html-tag 中使用它，如下所示：

<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
    return recaptchachecked;
}

我希望這可以幫助你。