Drupal 7 webform未勾选reCAPTCHA时如何保持模态窗口打开

核心问题根因 #

当前异常的触发链路是：

• D7生态下承载webform的模态绝大多数是CTools弹窗组件，默认逻辑是表单点击提交后，不区分校验是否通过，只要收到后端AJAX响应就执行关窗动作
• reCAPTCHA的状态校验没有嵌入到提交动作的前置拦截环节，未勾选状态下请求已经发往后端，后端返回校验错误时，模态已经提前触发关闭流程

分步落地方案 #

1. 前端前置拦截未验证状态的提交动作 #

• 通过Drupal 7 的hook_form_webform_client_form_alter() 钩子，向目标webform的#attached 属性追加自定义JS文件
• 在JS逻辑中绑定webform提交按钮的点击事件，在事件触发的最前端判断reCAPTCHA组件的校验状态：
  • 若处于未勾选/未验证状态，直接调用event.preventDefault() + event.stopImmediatePropagation() 阻断提交流程，不向后端发起请求
  • 给reCAPTCHA对应容器添加Drupal表单默认的错误提示类，展示“请完成人机验证”的前置提示

2. 修正CTools模态框的响应处理逻辑 #

• 拦截CTools组件的AJAX响应处理流程：当后端返回的响应中包含表单校验错误信息（即未通过reCAPTCHA验证的错误返回）时，移除响应对象中自带的closeDialog 关窗命令，从流程上阻断模态自动关闭的触发条件
• 校验失败时自动将弹窗内的滚动条定位到reCAPTCHA组件所在区域，让用户直接看到未完成验证的提示

3. 同步reCAPTCHA的状态回调 #

• 绑定reCAPTCHA自身的状态回调事件：用户完成勾选验证时，解除提交按钮的拦截状态，允许正常提交；当验证状态过期、需要重新勾选时，自动将提交按钮置为不可交互状态，避免误触发
• 若使用reCAPTCHA v2版本，可直接在组件渲染参数中自定义callback 和expired-callback 方法，和提交拦截逻辑做状态同步

常见踩坑提示 #

• 不要全局禁用CTools的模态关窗逻辑，需要精准判断响应内容：仅在校验失败的场景下拦截关窗，保留正常提交成功后的关窗、跳转成功提示的原有逻辑
• 若webform支持AJAX动态刷新表单内容，需要在每次表单重绘后重新绑定提交拦截、reCAPTCHA状态监听的逻辑，避免事件绑定失效
• 不要仅依赖后端返回的错误状态做关窗判断：后端错误响应到达浏览器时，CTools的默认关窗逻辑往往已经提前触发，必须在前端提交发起前就完成校验拦截

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