WET-BOEW表单验证中错误摘要显示问题的分析与解决方案

问题背景

在WET-BOEW框架的表单验证功能中，存在一个影响用户体验和可访问性的问题：当用户在填写表单时，错误摘要会过早显示"表单无法提交"的提示信息，而此时用户尚未真正提交表单。这种情况特别容易对认知障碍用户造成困扰。

问题重现与分析

通过WET-BOEW的表单验证示例页面可以重现该问题：

1. 在"Title"下拉框中选择一个有效值
2. 然后重新选择"Select a title"选项
3. 此时错误摘要会自动显示，提示表单无法提交

经过代码分析发现，问题的根源在于表单验证的触发机制。在formvalid.js文件中有一段强制验证的代码，它会忽略jQuery验证插件的配置参数（如onclick=false等），在用户操作选择框时强制触发验证。

技术解决方案

针对这一问题，我们提出了分阶段验证的改进方案：

1. 表单填写阶段：当用户正在填写表单时，仅在被验证字段附近显示错误信息（如字段标签处），不显示全局的错误摘要。这样既提供了即时反馈，又避免了过早显示提交错误造成的混淆。

2. 表单提交阶段：当用户真正提交表单时，如果存在验证错误，则显示完整的错误摘要，包含所有验证错误信息。

3. 错误修正阶段：当用户开始修正错误时，随着错误的修正，相应的错误信息会从摘要中移除。当所有错误都被修正后，错误摘要自动隐藏。

可访问性考虑

在实现过程中，我们还注意到屏幕阅读器（如NVDA）会重复播报错误信息的问题。这是因为：

• 字段标签变更会被读取
• aria-live区域更新也会被读取

通过优化验证触发机制，我们确保在用户通过键盘操作（如Tab键切换字段）时，错误信息只通过aria-live区域播报一次，避免重复干扰。

实现细节

改进后的实现保留了原有的wb-steps插件兼容性代码，同时增强了验证行为的智能性：

• 区分用户主动提交和字段变更触发的验证
• 动态管理错误摘要的显示/隐藏状态
• 优化屏幕阅读器的反馈体验

这种改进既解决了原始问题，又保持了框架的向后兼容性，同时提升了所有用户（特别是残障用户）的表单填写体验。