Як перевірити в js, що користувач встановив прапорець у рекапті Google?

До кінця заголовка я додав наступне

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

Я додав це до кінця форми

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

Я бачу рекапчу, схожу на https://developers.google.com/recaptcha/

Однак, коли користувач натискає дані, не встановивши прапорець, дані подаються. Чи є інший код, який мені потрібно додати, щоб перевірити, чи не натиснув користувач прапорець? Сподіваємось, у js?

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');
};

Ви також можете викликати об’єкт grecaptcha для перевірки. grecaptcha.getResponse();є порожнім, якщо його не позначено, і має код перевірки, коли встановлено.

grecaptcha.getResponse().length === 0 коли не позначено

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

if (isCaptchaChecked()) {
  // ...
}

Щоб перевірити, чи перевірено 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>

Щоб перевірити, чи перевірено 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
             }
         });
     })

Нехай браузер виконує роботу за вас! (на основі відповіді slinky2000)

Примітка: це лише для запобігання надсилання випадково не перевіреної повторної перевірки. Вам все одно доведеться перевірити повторну перевірку на стороні сервера бо боту все одно ...

Додайте невидимий вхідний тег з 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; вище нижньої частини рекапчі.

Тепер браузер просить приємно заповнити це поле - вказуючи на підсумок.

Тепер нам потрібен зворотний дзвінок:

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

і

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