Как сделать reCAPTCHA обязательным полем?

Question

Как сделать reCAPTCHA обязательным полем?

Я использую Google reCAPTCHA и смог добавить компонент CAPTCHA на свою страницу внутри формы. Но когда я отправляю форму, не происходит никакой проверки, чтобы проверить, была ли капча решена.

Как проверить, что компонент CAPTCHA был решен при отправке моей формы? Или, другими словами, как сделать мой компонент CAPTCHA обязательным?

534 5

recaptcha

5 ответов:

Comments

Ничего не найдено.

Al.G. · Accepted Answer · 2016-05-19 22:01:49

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

Сначала объявите переменную, которая хранит 1 или 0 в зависимости от того, правильно ли пользователь заполнил капчу.
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">
Примечание: Как упоминалось в комментариях, проверка сервера все еще необходима. Код предотвращает случайную отправку формы, если капча не заполнена, и только для удобства пользователя.

Fred · Accepted Answer · 2016-05-05 13:20:01

Если вы хотите использовать собственные всплывающие окна 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;
}

secenv · Accepted Answer · 2017-05-23 15:34:29

Я обнаружил, что это быстрый и простой способ сделать это. Добавьте это к вашим заголовкам:
<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, и я не смог обойти это. Надеюсь, кто-то еще улучшит эту реакцию.)

citynorman · Accepted Answer · 2016-11-13 17:46:21

Я проверил наличие #G-recaptcha-ответа:

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

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

ForTheWin · Accepted Answer · 2015-03-31 22:32:34

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