reCaptcha v3脚本阻止AJAX表单发邮件，提示找不到onSubmit函数

问题根源 #

1. 作用域限制：你的onSubmit函数定义在validateMe()内部的表单submit回调里，属于局部函数，reCAPTCHA的全局脚本无法找到它，因此触发报错。
2. 逻辑嵌套混乱：按钮绑定了click事件，内部又嵌套绑定表单submit事件，导致触发时机、作用域冲突，且AJAX提交逻辑未与reCAPTCHA验证流程结合。

修复方案 #

将onSubmit移至全局作用域，重构验证+提交流程，让前端验证、reCAPTCHA验证、AJAX提交按顺序执行：

修改后的JS代码

// 全局定义onSubmit函数，确保reCAPTCHA能调用到
function onSubmit(token) {
  // 携带reCAPTCHA token发起AJAX请求
  $.ajax({
    type: "POST",
    url: "inc/contact.php",
    data: $("#contact-form").serialize() + '&g-recaptcha-response=' + token,
    success: function(data) {
      console.log(data);
      $('.success-message').show(1000);
    },
    error: function() {
      alert('提交失败，请稍后重试');
    }
  });
}

// 表单提交时先执行前端验证
$('#contact-form').submit(function(e) {
  e.preventDefault(); // 阻止默认表单跳转
  if (validateMe()) {
    // 验证通过，触发reCAPTCHA验证
    grecaptcha.execute();
  }
});

function validateMe() {
  $('label').css('color', 'white');
  var error = [];
  var emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  // 验证输入框
  $('#contact-form input').each(function() {
    var inputName = $(this).attr('name');
    if ($(this).val().length > 4) {
      if (inputName === 'email' && !emailReg.test($(this).val())) {
        error.push(inputName);
        console.log('invalid email');
      }
    } else {
      error.push(inputName);
    }
  });

  // 验证文本域
  $('#contact-form textarea').each(function() {
    var inputTextname = $(this).attr('name');
    if ($(this).val().length < 4) {
      error.push(inputTextname);
    }
  });

  if (error.length === 0) {
    return true; // 验证通过
  } else {
    error.forEach(function(field) {
      $('label[for="' + field + '"]').css('color', 'red');
    });
    return false; // 验证失败
  }
}

HTML按钮保持原结构（确保data-callback指向全局onSubmit）

<button class="button-class form-button g-recaptcha" type="submit" name="submit" value="send" 
        data-sitekey="6Lc8GI4iAAAAAFxgjs6MQwHdtp5ZjLcgIDQKsJSL" 
        data-callback='onSubmit' 
        data-action='submit'>Send Message</button>

关键说明 #

• onSubmit必须处于全局作用域，reCAPTCHA脚本才能正常调用
• 前端验证通过后，调用grecaptcha.execute()触发reCAPTCHA验证，验证成功后会自动调用onSubmit并传入token
• AJAX提交时需将g-recaptcha-response（即token）一并传给后端，后端需验证该token的有效性
• 移除原代码中冗余的按钮click事件绑定，直接通过表单submit事件控制流程，避免逻辑冲突

内容的提问来源于stack exchange，提问作者xbass540