使用 Recaptcha v3 后提交表单不起作用

Question

我正在尝试在我的表单上使用 Recaptcha v3，但仅在删除 Recaptcha 时提交表单才有效。 启用 Recaptcha 后，我可以单击提交按钮，但没有任何反应。即使我可以在右下角的前端看到 protected by reCAPTCHA 徽标，我什至没有在控制台中收到错误消息。 我正在使用 Laravel 6。

我的表单模板如下所示：

    <div class="row mt-150">
    <div class="col-12 text-center text-white">
        <h1>Contact</h1>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-md-4 col-sm-12">
        <form action="{{route('contact_form')}}" method="POST">
            @csrf
            <div class="form-group">
                <label for="email" class="text-white">Email address</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="textarea" class="text-white">Message</label>
                <textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
            </div>
            <input type="submit"
                    id="submitButton"
                    class="g-recaptcha btn btn-primary"
                    data-sitekey="MY-PUBLIC-KEY"
                    data-callback='onSubmit'
                    data-action='submit'
                    name="submit">
        </form>
    </div>
</div>

<script src="https://www.google.com/recaptcha/api.js"></script>

还有一个 app.js 包含验证码回调函数：

function onSubmit(token) {
  document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;

有人可以提示我在实施 recaptcha 时做错了什么吗？ 我试着这样做：

Google reCaptcha v3

Answer 1

这不起作用，因为您试图在按钮上触发submit()。给表单一个id，然后在表单上触发submit()

<form action="{{route('contact_form')}}" method="POST" id="contactForm">
    @csrf
    <div class="form-group">
        <label for="email" class="text-white">Email address</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="textarea" class="text-white">Message</label>
        <textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
    </div>
    <input type="submit"
        id="submitButton"
        class="g-recaptcha btn btn-primary"
        data-sitekey="MY-PUBLIC-KEY"
        data-callback='onSubmit'
        data-action='submit'
        name="submit">
</form>

然后在javascript中获取表单并触发提交

function onSubmit(token) {
  document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;