Как я могу сделать reCAPTCHA необходимым полем?

Ответ 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;
}

Ответ 2

У меня была та же проблема, что и у вас, и решил так:

Сначала объявите переменную, которая хранит 1 или 0 в зависимости от того, правильно ли пользователь набрал capcha.

var allowSubmit = false;

Затем вам нужна функция, которая выполняется, когда пользователь правильно заполняет reCapcha:

function capcha_filled () {
    allowSubmit = true;
}

... и функция, выполняемая после окончания сеанса reCapcha:

function capcha_expired () {
    allowSubmit = false;
}

Чтобы сообщить reCapcha о ваших функциях (обратных вызовах), установите эти атрибуты data- в свой 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">

Примечание:, как указано в комментариях, требуется проверка сервера. Код предотвращает случайную отправку формы, если кача не заполнен, а предназначен только для удобства пользователя.

Ответ 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

(Консоль JS в Chrome показывает это сообщение об ошибке: "Недопустимый контроль формы" только в Google Chrome, и мне не удалось обойти это Надеюсь, кто-то еще улучшит этот ответ.)

Ответ 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;
    }
    //...
});

Это действительно должно быть частью документации...

Ответ 5

Не уверен, что вы уже решили это, но вы можете использовать аддон для проверки Google recaptcha: http://formvalidation.io/addons/recaptcha2/

Ответ 6

Я нахожу это очень полезным:

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

Я надеюсь, это поможет вам.

Ответ 7

Если вы хотите более понятное и понятное сообщение, вы можете добавить обязательный флажок. Это обеспечит отображение всплывающего окна 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;
}