我正在尝试在表单上使用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时做错了什么吗?我试图这样做:
这将不起作用,因为您尝试触发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] 删除。
我来说两句