Проверка формы HTML5 перед reCAPTCHA

я интегрировал новую скрытую структуру reCAPTCHA (v2), которая по умолчанию проверяет пользователя с помощью click событие кнопки отправки. Но это событие запускается перед встроенной проверкой формы HTML5. Я ищу способ сделать это в ожидаемом порядке: сначала проверка формы, затем рекапча.

18
html5 html5-validation recaptcha

5 ответов

вы должны сделать это программно благодаря новому v2 grecaptcha способ: grecaptcha.execute() Так что recaptcha не заменяет событие click кнопки по умолчанию, которое препятствовало проверке формы HTML5 по умолчанию.

путь события:

  1. отправить нажмите кнопку событие: браузер встроенная проверка формы
  2. форма отправить событие: вызов grecaptcha.execute()
  3. обратный вызов reCAPTCHA: отправьте форма

$('#form-contact').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
  <div class="g-recaptcha" 
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>
23

Привет получил рабочее решение здесь. Работа с невидимым Recaptcha. 

jQuery(document).ready(function() {
    var commentform = jQuery("#commentform");
    commentform.on("click", "#submit-comment", function(e) {
      if(commentform[0].checkValidity()) {
        e.preventDefault();
        grecaptcha.execute();
      }
    });
});

function submitCommentForm(data) {
    document.getElementById("commentform").submit();
}
<form action="blaba.php" method="post" id="commentform" class="comment-form">
  <div class="form-submit">
    <div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
    <button id="submit-comment">Leave a comment</button>
  </div>
</form>
4

вот мое решение, чтобы получить проверку HTML5 + невидимый recaptcha:

HTML-код:

<form id="my-form">
    <!-- Your form fields ... -->
    <div class="g-recaptcha"
        data-sitekey="..."
        data-callback="submitMyForm"
        data-size="invisible">
    </div>
    <button type="submit">Submit</button>
</form>

JS:

var myForm = $('my-form');

function submitMyForm () {
    myForm.trigger('submit', [true]);
}

$(function () {
    myForm.on('submit', function (e, skipRecaptcha) {
        if(skipRecaptcha) {
            return;
        }

        e.preventDefault();
        grecaptcha.execute();
    });
  })
3
 let siteKey = "...";
 $("form").submit(function (eventObj) {
        var myForm = this;
        eventObj.preventDefault();
        grecaptcha.execute( siteKey, {
            action: "submit"
        })
            .then(function (token) {
                $('<input />').attr('type', 'hidden')
                    .attr('name', "g_recaptcha_response")
                    .attr('value', token)
                    .appendTo(myForm);
                myForm.submit();
            });
    });

это выполнит recapcha, дождитесь ответа, добавьте скрытый атрибут g_recaptcha_response в любую форму, когда браузер попытается отправить его, а затем фактически отправить его. Вам нужна глобальная переменная siteKey

0

Я хотел того же поведения, но используя новый recaptcha, невидимый. Посмотрев на какой-то код и протестировав некоторые вещи, я попал в это:

var contact_form;
$(function() {
    contact_form = $('#contact-form');
    contact_form.submit(function (event) {
        if ( ! contact_form.data('passed')) {
            event.preventDefault();
            grecaptcha.execute();
        }
    });
});
function sendContactForm(token) {
    contact_form.data('passed', true);
    contact_form.submit();
}

он в основном хранит объект формы jquery в глобальном var, в том числе, он использует sendContactForm в качестве обратного вызова, но при вызове recaptcha он устанавливает var данных с именем passed, который позволяет форме не быть предотвращенным. Это точно такое же поведение, как обычно recaptcha, но с этим состояние.

Пожалуйста, подумайте об изменении принятого ответа, который ИМХО, это не очень хорошо. Конечно, ничего личного, просто споры. С уважением.

-1