Shelf.nu项目中表单错误处理的优化实践

在Shelf.nu这个资产管理平台项目中，用户反馈了一个关于表单验证体验的问题：当编辑资产信息时，如果存在必填字段未填写的错误，系统不会自动滚动到错误位置，导致用户难以发现错误提示。本文将深入分析这个问题背后的技术实现及解决方案。

问题背景

在资产管理系统中，资产编辑表单通常包含多个字段，有些是必填项。当用户提交表单时，如果某些必填字段未填写，系统会在相应字段下方显示错误提示。然而，当这些错误字段位于页面可视区域之外时，用户可能无法立即发现错误，导致重复提交操作。

技术分析

该问题涉及前端表单验证的多个技术层面：

1. 表单验证机制：项目使用了Remix框架自带的Form组件和Zod验证库进行表单验证。当验证失败时，系统会在对应字段下方显示错误信息。

2. 视口管理：现代Web应用需要考虑不同屏幕尺寸下的可视区域问题。当表单较长时，错误字段可能不在当前视口中。

3. 用户体验优化：良好的错误提示应该让用户立即发现问题所在，而不是让用户自行寻找错误位置。

解决方案

经过技术团队讨论，确定了以下优化方案：

1. 自动滚动功能：当表单提交验证失败时，系统会自动检测第一个出现错误的字段是否在可视区域内。如果不在，则平滑滚动到该字段位置。

2. 错误字段优先级：对于多个字段同时出现错误的情况，系统会优先处理第一个错误字段，确保用户首先看到最关键的验证问题。

3. 全局解决方案：通过创建一个自定义Hook来封装这一行为，确保整个应用中的表单都能获得一致的体验，而不需要为每个表单单独实现。

实现细节

技术团队考虑了两种实现方式：

1. 自定义Form组件：扩展Remix的Form组件，添加自动滚动功能。这种方式需要对现有代码进行较大改动。

2. 自定义Hook：创建一个useFormWithScroll Hook，内部使用useZorm Hook，并通过useEffect监听验证错误。这种方式侵入性较小，更易于维护。

最终选择了第二种方案，因为它更灵活且不影响现有代码结构。该Hook会：

• 监听表单验证状态变化
• 检查错误字段是否在视口中
• 使用scrollIntoView API实现平滑滚动
• 处理多个错误字段的优先级

技术挑战

在实现过程中，团队遇到了几个技术挑战：

1. 性能考虑：需要确保滚动行为不会影响表单提交性能，特别是在移动设备上。

2. 用户体验：滚动行为需要平滑自然，避免突兀的跳转。

3. 兼容性：需要确保解决方案在各种浏览器和设备上都能正常工作。

总结

通过这次优化，Shelf.nu项目显著提升了表单验证的用户体验。这个案例展示了如何通过技术手段解决看似简单的用户体验问题，同时也体现了：

• 前端开发中考虑用户实际使用场景的重要性
• 如何平衡技术实现与用户体验
• 创建可复用解决方案的价值

这种自动滚动到错误字段的解决方案不仅适用于资产管理场景，也可以应用于各种需要表单验证的Web应用中，具有很好的普适性和参考价值。