时间戳

首页 > 解决方案 > Recaptcha v3 不工作 - 表单不提交

php - Recaptcha v3 不工作 - 表单不提交

问题描述

我正在尝试在 CakePHP 3.x 中实现 recaptcha v3。我的模板页面如下所示：

<?php $this->start('script'); ?>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
    function registerSubmit(token) {
        document.getElementById("register").submit();
    }
</script>
<?php $this->end(); ?>
...
<?php echo $this->Form->create($user, [ 'id' => 'register', 'name' => 'register']) ?>
...
<button type="submit"
        data-sitekey="<?php echo Configure::read('Captcha.site')?>"
        data-callback='registerSubmit'
        data-action='submit'
        class="g-recaptcha btn btn-lg btn-secondary text-uppercase">Get Started</button>
<?php echo $this->Form->end(); ?>

据我所知，registerSubmit调用永远不会被执行，我的表单也没有提交——为什么？

我按照Google Developers 页面上的说明进行操作

标签： phpcakephp-3.0recaptcha-v3

解决方案

我怀疑问题是您在表单中有一个 ID 为“提交”的按钮。表单中具有名称或 id 的任何元素都会反映在具有该名称的表单属性中。所以如果你有一个元素<input id="elephants"/> ，表单对象将有一个“大象”属性。在这种情况下，提交按钮可以通过 form.submit 访问，但这掩盖了 submit() 函数。您可以通过在 registerSubmit() 函数的开头添加警报来测试这一点。我相信警报会被执行，然后 submit() 调用将无法运行提交按钮，因为它不是一个函数。

如果一个表单控件（例如一个提交按钮）有一个提交的名称或id，这个方法将屏蔽表单的提交方法。

MDN 网络文档

推荐阅读