Запретить отправку формы до завершения загрузки recapcha v3 - PullRequest
Новая
       11

Запретить отправку формы до завершения загрузки recapcha v3

0 голосов
/ 14 апреля 2019

Я использую Recapcha V3 для вставки скрытого ввода в форму с токеном. Когда форма отправлена, я проверяю токен в бэкэнде и действую соответствующим образом. 

<script src='https://www.google.com/recaptcha/api.js?render={{config("recaptcha.key")}}'></script>
<script>
grecaptcha.ready(function () {
    grecaptcha.execute('{{config("recaptcha.key")}}', {action:  '{{$action}}'}).then(function (token) {
        $('<input />').attr('type', 'hidden')
                .attr('name', 'recaptcha')
                .attr('value', token)
                .appendTo('form');
    });
});
</script>

Проблема в том, что когда пользователь отправляет форму слишком быстро, а ввод еще не введен appendTo('form'), серверная часть не получает токен и возвращает пользователя обратно на страницу формы с ошибкой проверки (я препятствую отправке данных если токена нет).

Я не могу понять, как запретить отправку формы, пока токен не загрузится.

Так что-то вроде:

Если пользователь нажимает кнопку "Отправить", и токен еще не загружен, выполните анимацию загрузки и дождитесь, пока токен не будет отправлен, если маркер присутствует, когда пользователь нажимает кнопку "Отправить", разрешите отправку формы.

1 Ответ

0 голосов
/ 14 апреля 2019

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

<script src='https://www.google.com/recaptcha/api.js?render={{config("recaptcha.key")}}'></script>
<script>
// Whether the reCAPTCHA token is loaded into the form
var recaptchaLoaded = false;
// Whether the user already attempted submitting the form
var attemptedSubmit = false;

grecaptcha.ready(function () {
    grecaptcha.execute('{{config("recaptcha.key")}}', {action:  '{{$action}}'}).then(function (token) {
        $('<input />').attr('type', 'hidden')
                .attr('name', 'recaptcha')
                .attr('value', token)
                .appendTo('form');

        window.recaptchaLoaded = true;
        if(window.attemptedSubmit) {
            // As the user already attempted a submit,
            // trigger the "submit" mechanism

            // Note that this doesn't trigger the JS "submit" event
            $("#form").submit();
        }
    });
});

// Add an event listener for "submit"
$("#form").submit(function(event) {
    window.attemptedSubmit = true;
    if(!window.recaptchaLoaded) {
        // The reCAPTCHA token has not been inserted
        // Prevent submission of the form
        event.preventDefault();

        // Your button animation logic here...
    }
});
</script>
...