Recaptcha v3 不工作 - 表单不提交

Posted 2023-02-18

【中文标题】Recaptcha v3 不工作 - 表单不提交

【英文标题】：Recaptcha v3 not working - form doesn't submit

【发布时间】：2020-11-19 20:14:58

【问题描述】：

我正在尝试在 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 page上的说明进行操作

【问题讨论】：

不确定是不是button type="submit" 导致了问题。可能是它在data-action='submit' 之前触发，因此您永远无法使用registerSubmit 函数。简而言之，表单是在不调用 JavaScript 的情况下提交的。

表单根本不提交。也曾尝试将其作为“按钮”类型。我得到的唯一线索是按下按钮会导致对 Facebook 的调用，所以想知道是否与其他东西发生冲突。

这是一个很大的线索是的。您显示的代码没有其他任何建议，如果您想扩展它或自己调试，则由您决定。

你有没有想过这个问题？我正在尝试使用 reCaptcha 并输入来自 google 的代码，并且表单不会提交我的名为 submit 的 php 脚本！

【参考方案1】：

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

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

MDN Web docs