在 htmx 中处理表单错误

主要观点:时常听到对 htmx 在处理错误方面的批评,作者通过示例展示并非如此。常见需求是在表单验证失败的字段旁显示错误消息,可利用 HTML 的 Constraint Validation API 实现,示例表单提交到后端,若表单解码失败,后端用 422 状态码响应包含错误消息的 JSON,htmx 发送请求头 HX-Trigger 用于获取触发元素的 id,通过 JavaScript 遍历 JSON 并将错误消息附加到相应表单字段,还可添加事件监听器显示和清除错误消息,此技术不限于 htmx,可用于任何使用表单的前端,利用现代浏览器的内置功能使代码更具适应性并受益于浏览器 UI 的未来改进。

关键信息:

  • 常见表单验证需求及 Bulma CSS 框架和 Mozilla 开发者网络的相关示例。
  • 示例表单代码及提交后后端响应的 JSON 格式错误消息。
  • JavaScript 代码实现处理 htmx 的响应错误及相关事件处理。

重要细节:

  • 用 422 状态码表示表单验证失败,以 JSON 格式返回错误消息。
  • 通过 HX-Trigger 获取触发元素 id 来处理错误。
  • 在 JavaScript 中为表单字段设置自定义验证消息及相关事件监听器。
  • 强调此技术不限于 htmx 可用于其他前端。
阅读 18
0 条评论