Question

我正在使用axios将令牌发布到后端并验证Recaptcha，这一切都很好，但是现在引起我注意的是，提交表单时没有填写必填字段。有没有一种方法可以让我的浏览器在执行Recaptcha之前检查必填字段是否已填写。 -当前的行为是在检查所需输入是否具有值之前执行了Recpatcha。另外，提交者需要使用输入而不是div或按钮。

HTML

  <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" defer >

<form id="subscribe" class="form" method="POST" accept-charset="utf-8">
    {{ getCsrfInput() }}
    <input type="hidden" name="action" value="/some/url">

    <label>Name</label>
    <input type="text" id="fields-name" required name="fields[name]">

    <label>Email</label>
    <input type="email" id="fields-emailAdress" required name="fields[email]">

    <p class="js-form__error-message form__errors"></p>

    <div class="submit submit--wrapper submit--disabled text--white js-button__submit">
        <input id="g-recaptcha-subscribe" value="" type="submit">
    </div>
</form>

JAVASCRIPT

import axios from 'axios';
import qs from 'qs';

const subscribe = document.querySelector('#subscribe');

const gRecaptchaSubscribeCallback = (token) => {
    grecaptcha.execute();
    const formResponse = subscribe.querySelector('.js-form__error-message');
    const submitButtonSubscribe = subscribe.querySelector('.js-button__submit');
    submitButtonSubscribe.classList.add('submit--disabled');
    axios({
        method: 'POST',
        url: '/actions/newsletter/verifyRecaptcha',
        data: qs.stringify({
            recaptcha: token,
            [window.csrfTokenName]: window.csrfTokenValue,
        }),
        config: {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        },
    }).then((data) => {
        if (data && data.data.success) {
            formResponse.innerHTML = '';
            subscribe.submit();
        } else {
            formResponse.innerHTML = 'Form submission failed, please try again';
            submitButtonSubscribe.classList.remove('submit--disabled');
        }
    });
    grecaptcha.reset();
};

const onloadCallback = () => {
    if (subscribe) {
        grecaptcha.render('g-recaptcha-subscribe', {
            'sitekey': '[sitekeyhere]',
            'callback': 'gRecaptchaSubscribeCallback',
            'data-size': 'invisble',
        });
    }
};

window.onloadCallback = onloadCallback;
window.gRecaptchaSubscribeCallback = gRecaptchaSubscribeCallback;

Recaptcha是否在执行之前不检查必填字段？

0 个答案: