web-dev-qa-db-ja.com

ユーザーがGoogle recaptchaのチェックボックスをチェックしたことをjsでチェックインするにはどうすればよいですか？

私は頭の終わりの前に次を追加しました

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

フォームの終わりの前にこれを追加しました

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

https://developers.google.com/recaptcha/ に似たrecaptchaを見ることができます

ただし、ユーザーがチェックボックスをオンにせずにデータを押すと、データが送信されます。ユーザーがチェックボックスを押したかどうかを確認するために追加する必要がある他のコードはありますか？うまくいけばjsで？

javascriptjquerycheckboxrecaptcha
66
Hello Universe

Googleには、チェックボックスがオンになっている場合のコールバックオプションがあります。

これをフォーム要素に追加します。

data-callback="XXX"

例：

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>

そして、送信ボタンの無効化属性。

例：

<button id="submitBtn" disabled>Submit</button>

次に、コールバック関数を作成し、必要なコードを記述します。

例：

function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};
164
slinky2000

チェックするためにgrecaptchaオブジェクトを呼び出すこともできます。 grecaptcha.getResponse();は、チェックを外すと空になり、チェックすると確認コードが表示されます。

grecaptcha.getResponse().length === 0未チェックの場合

function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  // ...
}
55
Olafur Tryggvason

google recaptchaがチェックされているかどうかを確認するには、次のコードで実行できます。

<script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     // Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>
5
MUSTAPHA GHLISSI

ブラウザに任せてください！ （slinky2000回答に基づく）

注：これは、「誤って」未チェックの再送信を防ぐためだけです。 サーバー側でrecaptchaを確認する必要がありますボットは気にしないので...

required=trueのすぐ下にdiv.g-recaptcha属性を持つ不可視の入力タグを追加します。

<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'>

両方の幅をdivでposition=relative;で囲み、上のbottom:0;をrecaptchaの下部に向けます。

ブラウザはこのフィールドに記入するようにきちんと求めます-要約を指します。

次に、コールバックが必要です。

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

そして

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}
2
halfbit

google recaptcha v2がチェックされているかどうかを確認するには、次のコードで実行できます。

var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })
1
Manish Vadher