LESSON-22 · TOPIC 04
能以 idle/loading/success/error 管理 Vue 表單，loading 同步 aria-busy/disabled，錯誤時把焦點移到第一個無效欄位。
能以 idle/loading/success/error 管理 Vue 表單，loading 同步 aria-busy/disabled，錯誤時把焦點移到第一個無效欄位。
只改成功文字會讓重複送出、逾時與驗證失敗沒有一致復原路徑，也讓輔助科技讀不到忙碌狀態。
要修改的檔案：files/starter/index.html
定位：先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。｜依 module-4 定位，只修改「明確狀態轉移、aria-busy 與錯誤焦點」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
表單顯示送出中但按鈕仍可連按，錯誤訊息出現後鍵盤不知道要改哪裡。
起始狀態：state=idle、按鈕可用、name 空白。
sequence=idle>error>loading>success>idle、busyDuring=true、disabledDuring=true、errorFocus=async-name-input、finalState=idle。
驗收證據：sequence、busyDuring/disabledDuring、errorFocus、finalState 全部符合
送出聯絡、登入、查詢或任何非同步表單。
常見混淆：aria-busy 告知區域更新中，不會自動禁用控制項；disabled 與焦點策略仍需程式管理。
這段程式是理解起點，不是要你直接跳過 Starter。
表單每一刻只待在一個站牌；忙碌時鎖按鈕，錯誤時把鍵盤帶到要修的欄位，最後回到可操作狀態。
正式說法：A finite explicit UI state drives aria-busy, control disabled state, live status and focus management across validation and asynchronous transitions。
state='loading'; aria-busy=true; button.disabled=true；錯誤 nameInput.focus()；finally state='idle'。每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/index.html 定位：先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。。
檔案：files/starter/index.html 定位：先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。
要做：依序跑無效與有效送出，捕捉每次 state、busy、disabled 與 activeElement。
預期：sequence=idle>error>loading>success>idle、busyDuring=true、disabledDuring=true、errorFocus=async-name-input、finalState=idle。
證據：sequence、busyDuring/disabledDuring、errorFocus、finalState 全部符合
卡住先查：先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。
檔案：files/starter/index.html 定位：先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：sequence=idle>error>loading>success>idle、busyDuring=true、disabledDuring=true、errorFocus=async-name-input、finalState=idle。
證據：sequence、busyDuring/disabledDuring、errorFocus、finalState 全部符合
卡住先查：先記錄 state sequence，再分別核對由 state 推導的 DOM 屬性。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先畫出 error 與 success 兩條狀態路徑。
空白先 error/focus；有效值進 loading，記 busy/disabled，再 success/idle。
完整解答與原因：空白由 idle 進 error 並 focus name；有效送出進 loading，此時 aria-busy/disabled=true，再 success 並回 idle，讓所有路徑可恢復。