CHAPTER 23 · PRACTICE WORKSPACE

表單驗證、POST 與資料寫入

完成可驗證、提交並顯示結果的聯絡表單

04 Solution 3/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

驗證姓名與 Email

修改檔案：script.js

完成後看見：畫面顯示姓名、Email 驗證結果，通過時仍明確標示尚未建立 payload

TASK-02已完成

建立尚未送出的 payload 預覽

修改檔案：script.js

完成後看見：預覽區顯示 name、email、message，狀態為「payload 已建立；尚未送出」

TASK-03已完成

送出並管理 loading/success/error

修改檔案：script.js

完成後看見：成功與失敗都可重現，送出期間按鈕停用且完成後恢復

WORKSPACE

本階段實作區

已完成 TASK-03；請操作完整作品，逐項核對三項 Task 的可見結果。

MOCK POST

聯絡我

尚未建立 payload

CONTINUE

把完成品帶進本章創作挑戰

三項固定任務都已完成；下一步請改造需求、留下成果證據，不要停在照抄 Solution。

前往本章創作挑戰

CHAPTER HANDOFF

從列表狀態，交棒到一次可追蹤的送出

接收第 22 章：沿用已完成的產品列表與分頁邊界證據；本章不重做列表，改處理使用者輸入、驗證與提交生命週期。

交給第 24 章：完成後帶著驗證通過的 payload、loading／success／error 與 finally 恢復證據，下一章直接比較一次 POST 與持續訂閱，不重做表單驗證。

前往第 24 章：即時資料模型與 Firebase 介面