CHAPTER 23 · PRACTICE WORKSPACE

表單驗證、POST 與資料寫入

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

01 Starter 0/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-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：驗證姓名與 Email

修改：script.js

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

講解時展開：2 個小型比較

驗證 vs payload｜通過不等於已送出

比較：驗證只判斷輸入是否可接受，payload 是送出前的資料物件；兩者要清楚分段。

現在做：在 Checkpoint 1 先保持姓名空白、Email 輸入 a 後送出；再填姓名「小安」但保留錯誤 Email；最後填入 xiaoan@example.com 與訊息後送出。每一步都記錄 status 與 payload-preview，不要先修改 createPayload()。

看預期與證據

預期：三次結果依序是「請輸入姓名」、「Email 格式不正確」與「驗證通過；尚未建立 payload」；三次都沒有建立 payload。

證據：留下三列紀錄：輸入值、status、payload-preview，證明 validate() 先於 payload 建立，而且不同錯誤對應不同訊息。

空白／格式錯誤 vs 通過｜每種輸入都要有證據

比較：姓名與 Email 的不同錯誤狀態應各自顯示，不能只測一筆正確資料。

現在做：重跑三種輸入：空白姓名、錯誤 Email、完整資料；每次送出前先預測 status 與 preview，送出後核對實際文字，並確認錯誤路線不會清掉輸入。

看預期與證據

預期：姓名錯誤與 Email 錯誤各自可辨識；只有完整資料顯示驗證通過，且 payload-preview 仍維持「尚未建立 payload」。

證據：用三組輸入／預測／實際結果表，證明不是只測一筆正確資料，也沒有把錯誤統一成「提交失敗」。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 保持姓名空白、Email 輸入 a，按下送出後確認畫面沒有指出任何欄位錯誤。
  2. B｜預測：於 Checkpoint 1 依序送出空白姓名、錯誤 Email 與有效資料，觀察狀態區文字與 payload 預覽。
  3. C｜實作：在 script.js 的 validate() 完成「驗證姓名與 Email」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 validate() 與 script.js，最後重跑原操作。
  5. E｜驗收：畫面依序顯示「請輸入姓名」、「Email 格式不正確」與「驗證通過；尚未建立 payload」，預覽區仍未建立 payload

完成條件：DONE-01：畫面顯示姓名、Email 驗證結果，通過時仍明確標示尚未建立 payload

MOCK POST

聯絡我

尚未建立 payload

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「驗證姓名與 Email」。

前往 Checkpoint 1：完成 TASK-01

CHAPTER HANDOFF

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

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

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

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