0

Как сделать обьязательным поле google recaptcha? Например если пользователь не прошел капчу то кнопка отправить не работает

1

1 ответ 1

0

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
  const $form = document.querySelector('form');
  $form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log('prevented submit by code for demo');
  });
};
.wrapper {
  padding: 100px;
}

#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;
}
<div class="wrapper">
  <form>
     <div class="g-recaptcha" data-sitekey="6LcCsWoUAAAAAO520lKAXtblM0p76KNXL3n0dVUZ"></div>
    <button type="submit"> Submit</button>
  </form>
</div>

Чтобы посмотреть на пример в работе: https://codepen.io/internetztube/pen/aaoLqM

Суть кода заключается в том, чтобы после загрузки страницы повесить на input g-recaptcha-response атрибут required. Так как базовых возможностей нет. Всегда пользовался этим решением, никогда не подводил.

UPD:

$form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log('prevented submit by code for demo');
  });

Вот тут перехватывается отправка. Вместо console.log('prevented submit by code for demo'); иницируете отправку формы.

7
  • Спасибо за ответ, но после прохождения капчи кнопка не работает, (form action="mail.php")
    – user322352
    8 мая 2019 в 7:09
  • @user322352 дополнил ответ. 8 мая 2019 в 7:13
  • Все также кнопка не риагирует
    – user322352
    8 мая 2019 в 7:24
  • $form.addEventListener('submit', (event) => { event.preventDefault(); console.log('mail.php'); }); Я правильно сделал или как? Я пока что новичок, прошу строго не судить
    – user322352
    8 мая 2019 в 8:11
  • @user322352 вместо той строки что я привёл document.getElementById("myForm").submit(); где myform ID вашей формы. 8 мая 2019 в 8:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.