Google reCAPTCHA v3验证通过后如何移除required属性？（非模型绑定表单）

我来帮你搞定这个问题！其实只需要在现有代码基础上做一点小修改，就能实现验证通过后自动移除隐藏输入框的required属性，同时保证表单验证的有效性，还不会让用户填写的内容丢失。

第一步：给reCAPTCHA添加验证成功回调 #

首先修改你HTML里的reCAPTCHA容器，加上data-callback属性，这样用户完成验证码验证时会自动触发我们指定的函数：

<div class="control-group">
  <label class="control-label" for="CaptchaDeText"></label>
  <div style="position:relative">
    <!-- 添加data-callback属性 -->
    <div class="g-recaptcha" data-sitekey="xxxxxxx" data-callback="onCaptchaSuccess"></div>
    <input id='recaptcha_check_empty' required tabindex='-1' style='width:50px; height:0; opacity:0;pointer-events:none;position:absolute;bottom:0;'>
  </div>
</div>

第二步：修改JavaScript逻辑 #

接下来更新你的JS代码，新增一个回调函数处理验证成功的情况，同时修正原函数里的小问题（比如错误的DOM查找方式）：

// 验证码验证成功时自动调用的回调函数
function onCaptchaSuccess() {
  // 移除隐藏输入框的required属性
  $('#recaptcha_check_empty').removeAttr('required');
  // 移除控制组的错误样式
  $('#recaptcha_check_empty').closest('.control-group').removeClass('error');
}

// 表单提交前的验证函数
function isCaptchaChecked() {
  // 检查是否有验证码响应
  var hasValidCaptcha = grecaptcha && grecaptcha.getResponse().length !== 0;

  if (hasValidCaptcha) {
    $('#recaptcha_check_empty').closest('.control-group').removeClass('error');
    return true;
  } else {
    // 如果未验证，重新添加required属性确保HTML5验证触发
    $('#recaptcha_check_empty').attr('required', 'required');
    // 弹出提示
    $('#modalMessage').find('#modalBody').html(noCaptchaMessage);
    $('#modalMessage').modal('show');
    // 添加错误样式
    $('#recaptcha_check_empty').closest('.control-group').addClass('error');
    return false;
  }
}

关键细节说明 #

• 回调函数的作用：当用户完成reCAPTCHA验证时，onCaptchaSuccess会自动执行，直接移除隐藏输入框的required属性，这样表单提交时HTML5的默认验证就不会因为这个输入框而阻止提交。
• 修正DOM查找：你原来代码里用了$('#recaptcha_check_empty').find('.control-group')，这是错误的——因为#recaptcha_check_empty是input元素，.control-group是它的父级容器，所以要用closest('.control-group')才能正确找到对应的控制组，添加/移除错误样式。
• 双向处理：如果用户完成验证后又刷新了验证码（比如点击验证码图标重新获取），grecaptcha.getResponse()会变成空字符串，这时候在isCaptchaChecked里会重新给隐藏输入框加上required属性，确保表单不会跳过验证码验证就提交。

这样修改后，用户完成验证码验证时，隐藏输入框的required属性会被自动移除，表单提交时不会因为这个字段触发验证；如果用户没验证就提交，会弹出提示且保留表单里已填的内容，完美解决你的痛点！

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