web-dev-qa-db-ja.com

reCAPTCHAを必須フィールドにするにはどうすればよいですか？

Google reCAPTCHAを使用しており、フォーム内のページにCAPTCHAコンポーネントを追加できました。しかし、フォームを送信すると、CAPTCHAが解決されたかどうかを確認する検証は行われません。

フォームを送信するときにCAPTCHAコンポーネントが解決されたことを確認するにはどうすればよいですか？または、言い換えると、CAPTCHAコンポーネントを必須にする方法を教えてください。

recaptcha
32
Baikare Sandeep

ネイティブの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;
}
42
Fred

私はあなたと同じ問題を抱えていて、このように解決しました：

最初に、1または0を格納する変数、またはユーザーがcapchaを正しく入力したかどうかを宣言します。

var allowSubmit = false;

次に、ユーザーがreCapchaを正しく入力したときに実行される関数が必要です。

function capcha_filled () {
    allowSubmit = true;
}

...およびreCapchaセッションの有効期限が切れたときに実行される関数：

function capcha_expired () {
    allowSubmit = false;
}

ReCapchaに関数（コールバック）を伝えるには、これらのdata-attributesをhtmlに設定します。

<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">

注：コメントで述べたように、サーバー検証がまだ必要です。このコードは、capchaがいっぱいでユーザーの便宜のためだけでない限り、誤ってフォームを送信しないようにします。

17
Al.G.

これは素早く簡単な方法であることがわかりました。これをヘッダーに追加します。

<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でのみ無効なフォームコントロール" 、これを回避できませんでした。うまくいけば他の誰かがこの応答を改善します。）

10
secenv

＃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;
    }
    //...
});

これは本当にドキュメントの一部でなければなりません...

7
citynorman

これをすでに解決したかどうかはわかりませんが、アドオンを使用してGoogle recaptchaを検証できます。 http://formvalidation.io/addons/recaptcha2/

1
ForTheWin

私はこれが非常に役立つと思います：

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

次のコードで関数をdata-callback = "recaptchaCallback"に追加します。

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

関数は、次のような他のhtmlタグで使用する値を返しました：

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

これがあなたのお役に立てば幸いです。

0
Alexander Stoldt

よりわかりやすく説明的なメッセージが必要な場合は、必要なチェックボックスを追加できます。これにより、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;
}
0
Cacobala