Google reCAPTCHA v3：无法在数据回调中提交表单

编程问答 2022-08-14

问题描述

当我单击“提交”按钮时，表单未提交。为什么？

我直接从Google的示例代码中获得了它，我只添加了一行：

document.getElementById（“ myform”）。submit（）;

显示“谢谢”消息。

如果我单击“提交而不验证”按钮，则表单已提交。

<html>
<head>
<script>
    function onSubmit(token) {
        alert('thanks ' + document.getElementById('name').value);
        document.getElementById("myform").submit();
    }

    function validate(event) {
        event.preventDefault();
        if (!document.getElementById('name').value) {
            alert("You must add text to the required field");
        } else {
            grecaptcha.execute();
        }
    }

    function onload() {
        var element = document.getElementById('submit');
        element.onclick = validate;
    }
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="/Second/Save" method="post" id="myform">
    Name: (required) <input id="name" name="name">

    <div id='recaptcha' class="g-recaptcha"
         data-sitekey="6LexWMMZAAAAAGpLECkk-pfZ-sYuQ9qDu7wiMJ3M"
         data-callback="onSubmit"
         data-size="invisible"></div>

    <button id='submit'>submit</button>
    <button onclick="onSubmit();">Submit Without Validate</button>
</form>
<script>onload();</script>
</body>
</html>

解决方法

问题是您在表单中有一个按钮，其ID为“提交”。表单中具有名称或ID的任何元素都会反映在具有该名称的表单属性中。因此，如果您拥有表单对象，则将具有“大象”属性。在这种情况下，可通过form.submit来访问“提交”按钮，但这会掩盖Submit（）函数。

如果表单控件（例如“提交”按钮）具有提交的名称或ID，则此方法将屏蔽该表单的Submit方法。

,

请检查您的站点密钥，该错误主要是在您的域与站点密钥不匹配时形成的。

您可以使用自己的Google帐户创建自己的域的Google验证码密钥，该密钥免费提供，以下链接 https://www.google.com/recaptcha/admin/create

recaptcha recaptcha