表单提交时，隐形reCaptcha上的未捕获类型错误

Question

我试图通过谷歌实施新的隐形回收。

但是我需要输入并且应该在重新执行recaptcha之前验证表单。

我在recaptcha回调函数上遇到了错误：

  

未捕获的TypeError：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/

Answer 1

我找到了解决方案。

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

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

更改按钮ID ：

<button id='action'>Submit</button>
            ^ submit > action or whatever

Answer 2

在我的情况下，我在表单中有一个输入（type =“submit”）标记而不是按钮。输入的名称与提交函数冲突。

解决方案是为输入标签提供与“submit”不同的名称：

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

我必须明确命名标记，因为该名称默认为从type属性“提交”。

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

grecaptcha.reset();

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

Answer 3

检查您的域白名单

我遇到了这个错误，直到发现错误是我没有将正确的域添加到域白名单中，才解决了这个问题。

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