Как проверить в js, что пользователь установил флажок в Google recaptcha?

Я добавил следующее до конца головы

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

Я добавил это до конца формы

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

Я могу видеть recaptcha, подобную https://developers.google.com/recaptcha/

Однако, когда пользователь нажимает данные без проверки флажка, данные передаются. Есть ли какой-либо другой код, который мне нужно добавить, чтобы проверить, нажал ли этот флажок? Надеюсь, в js?

Ответ 1

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

Ответ 2

Вы также можете вызвать объект grecaptcha для проверки. grecaptcha.getResponse(); пуст при снятии флажка и имеет проверочный код при его проверке.

grecaptcha.getResponse().length === 0 при снятии флажка

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

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

Ответ 3

Пусть браузер выполнит эту работу за вас! (на основе ответа slinky2000)

примечание: это только для предотвращения отправки "случайно" непроверенной recaptcha. Вам все равно нужно проверить 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;'>

Закрепите обе ширины a div с помощью position=relative;, чтобы указать bottom:0; выше в нижней части recaptcha.

Теперь Браузер просит красиво заполнить это поле - указывая на recapcha.

Теперь нам нужен обратный вызов:

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

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

Ответ 4

Чтобы проверить, отмечен ли 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>