使用Recaptcha v3后无法提交表单

希望萨瓦斯

我正在尝试在表单上使用Recaptcha v3,但仅在删除Recaptcha时提交表单才有效。启用Recaptcha后,我可以单击“提交”按钮,但是什么也没有发生。即使我可以在右下角的前端看到受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

唐卡纳什

这将不起作用,因为您尝试触发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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章