1

我正在尝试通过谷歌实现新的隐形 recaptcha。

但我需要输入，应该在执行 recaptcha 之前验证表单。

我在这样的 recaptcha 回调函数上遇到错误：

未捕获的类型错误：document.getElementById() 提交不是函数

那么在执行验证和重新验证后如何提交表单？

HTML：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="form" action="?" method="post">
     Name: (required) <input id="field" name="field">
     <div id='recaptcha' class="g-recaptcha"
          data-sitekey="6LcAmBAUAAAAAFukLQIkOIICuBBxKEdn-Gu83mcH"
          data-callback="onSubmit"
          data-size="invisible"></div>
     <button id='submit'>submit</button>
   </form>
<script>onload();</script>

Javascript：

function onSubmit(token) {
  alert('Thanks ' + document.getElementById('field').value + '!');
  document.getElementById('form').submit(); // This is error line
}

function validate(event) {
  event.preventDefault();
  if (!document.getElementById('field').value) {
    alert("Please enter your name.");
  } else {
    grecaptcha.execute();
  }
}

function onload() {
  var element = document.getElementById('submit');
  element.onclick = validate;
}

JSFiddle：http: //jsfiddle.net/dp1cLh28/6/

4

3 回答 3

8

我找到了解决方案。

问题是命名为submit( ) 的按钮 ID 与功能button id="submit"冲突。.submit()

当我更改按钮 ID 时，它可以工作！

更改按钮 ID：

<button id='action'>Submit</button>
            ^ submit > action or whatever
于 2017-03-17T15:03:00.743 回答
4

检查您的域白名单

我遇到了这个错误并且无法解决，直到我发现错误是我根本没有将正确的域添加到域白名单中。

域错误未出现在控制台上，我没有注意到页面上显示错误的选项卡（如下）：

站点密钥的域名无效

于 2019-01-18T10:53:23.107 回答
0

就我而言，我在表单中有一个输入 (type="submit") 标签，而不是一个按钮。输入的名称与提交功能冲突。

解决方案是给输入标签一个不同于“提交”的名称：

<input type="submit" name="anything-except-submit">

我必须明确命名标签，因为名称默认为 type 属性中的“提交”。

还需要注意的是，只有当用户成功解决 reCAPTCHA 时才会调用回调，因此如果您的回调正在执行任何表单验证，则必须调用

grecaptcha.reset();

如果验证失败。这意味着用户将不得不再次解决 reCAPTCHA，否则他将无法在更正后提交表单。

于 2017-04-12T13:01:07.927 回答