Google隐形reCAPTCHA报错：onSubmit函数未找到问题求助

听起来你遇到的问题是Invisible reCAPTCHA的默认提交逻辑跳过了h5Validate的表单验证，还出现了onSubmit函数找不到的报错——这其实是很常见的作用域和流程顺序问题，我来给你梳理几个可行的解决思路：

1. 让h5Validate完全接管表单提交流程 #

Invisible reCAPTCHA默认会直接触发提交，所以你需要先让h5Validate把控第一步验证，验证通过后再手动触发reCAPTCHA的验证。

具体来说，初始化h5Validate的时候，利用它的submitHandler回调，这个回调会在表单验证通过后执行，我们在这里调用reCAPTCHA的grecaptcha.execute()来触发人机验证，而不是让表单直接提交：

$(document).ready(function() {
  $('#your-form-id').h5Validate({
    submitHandler: function(form) {
      // 验证通过，触发reCAPTCHA人机验证
      grecaptcha.execute();
      return false; // 阻止表单默认提交，等待reCAPTCHA回调结果
    }
  });
});

2. 确保reCAPTCHA的回调函数全局可访问 #

控制台提示找不到onSubmit函数，大概率是你的函数被定义在了局部作用域里（比如某个闭包内），导致reCAPTCHA无法访问到它。解决办法是把回调函数挂载到window对象上，或者直接定义为全局函数：

// 定义全局可访问的reCAPTCHA回调函数
window.onCaptchaSuccess = function(token) {
  // 把reCAPTCHA令牌添加到表单的隐藏字段中
  $('#your-form-id').append('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
  // 验证全部完成，正式提交表单
  document.getElementById('your-form-id').submit();
};

然后在你的reCAPTCHA按钮上，把data-callback设置为这个全局函数：

<button class="g-recaptcha" 
        data-sitekey="你的站点密钥" 
        data-callback="onCaptchaSuccess" 
        data-size="invisible">提交</button>

3. 检查脚本加载顺序和初始化时机 #

别忘了确保脚本加载的顺序正确：先加载jQuery，再加载h5Validate，最后加载Google reCAPTCHA的脚本。而且所有初始化代码都要放在$(document).ready()或者DOMContentLoaded事件里，避免DOM元素还没加载就执行代码，导致绑定失败。

4. 移除表单上的inline onSubmit属性 #

如果你的表单标签上写了onSubmit="xxx()"，建议直接去掉它——h5Validate和reCAPTCHA的提交逻辑会和它冲突，统一用submitHandler和reCAPTCHA回调来控制流程就好。

按照这个流程走，就能先完成h5Validate的字段验证，再触发reCAPTCHA，最后提交带令牌的表单，同时解决函数找不到的问题。

内容的提问来源于stack exchange，提问作者John the Painter