如何为未验证的reCAPTCHA触发HTML5自定义验证弹窗？

这个问题我之前也碰到过！因为reCAPTCHA的容器是<div>，不是标准的表单控件，所以没法直接调用setCustomValidity()。不过我们可以用一个小技巧，借助隐藏的表单元素来触发原生的验证弹窗，完美匹配你要的效果。

解决方案思路 #

原生HTML5表单验证只对标准表单控件（input、select、textarea等）生效，所以我们可以添加一个隐藏的required input来“代理”reCAPTCHA的验证状态，通过这个input来触发浏览器的原生错误弹窗。

步骤1：修改reCAPTCHA区块，添加隐藏input #

在你的reCAPTCHA div旁边新增一个隐藏的input元素，同时给reCAPTCHA加上验证成功的回调：

<div class="group-item element-fullwidth">
  <div class="form-group form-group-select-white text-left">
    <label id="g-capcha-label" for="g-capcha" class="form-label form-label-outside rd-input-label text-white-05">Захист</label>
    <div id="g-capcha" name="recaptcha" class="g-recaptcha" data-sitekey="хххххххххххххххххххххххххххххх" data-callback="onRecaptchaSuccess"></div>
    <!-- 新增隐藏input，用于触发原生验证弹窗 -->
    <input type="hidden" id="recaptcha-validator" name="recaptcha-validator" required aria-describedby="g-capcha-label">
  </div>
</div>

注：aria-describedby是为了保证可访问性，让屏幕阅读器知道这个input和reCAPTCHA标签相关联。

步骤2：修改验证逻辑，绑定原生弹窗 #

更新你的OnBeginBooking函数，同时新增reCAPTCHA验证成功的回调：

// reCAPTCHA验证通过时自动触发的回调
function onRecaptchaSuccess() {
  const validatorInput = document.getElementById('recaptcha-validator');
  // 验证通过后清除input的错误状态
  validatorInput.setCustomValidity('');
}

function OnBeginBooking() {
  const recaptchaResponse = grecaptcha.getResponse();
  const validatorInput = document.getElementById('recaptcha-validator');

  if (recaptchaResponse.length === 0) {
    // 给隐藏input设置自定义错误提示
    validatorInput.setCustomValidity('请完成reCAPTCHA验证');
    // 触发浏览器原生验证弹窗
    validatorInput.reportValidity();
    return false;
  } else {
    // 确保错误状态已清除
    validatorInput.setCustomValidity('');
    $(".loader").removeClass("hidden-loader");
    $("#bookingpanel").addClass("hidden-booking-button");
    return true;
  }
}

原理说明 #

• 当用户未完成reCAPTCHA验证时，我们给隐藏的input设置自定义错误，然后调用reportValidity()，浏览器就会弹出和你其他表单字段一致的原生验证弹窗。
• 当用户完成reCAPTCHA验证后，回调函数会自动清除input的错误状态，确保表单能正常提交。

这样就能完美实现你想要的效果，和其他表单字段的验证弹窗风格完全统一！

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