LESSON-18 · TOPIC 02
能先用 checkValidity() 取得整體 Boolean，再在需要使用者修正時用 reportValidity() 顯示瀏覽器提示。
能先用 checkValidity() 取得整體 Boolean，再在需要使用者修正時用 reportValidity() 顯示瀏覽器提示。
若未先通過前端 constraint validation 就送 request，會浪費網路請求；只讀 Boolean 又不提示，使用者不知道要修哪欄。
要修改的檔案：files/starter/main.js
定位：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。｜依 starter-2 定位，只修改「checkValidity() 與 reportValidity()」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
使用者按送出沒有 request，也沒有任何畫面告訴他 email 欄位錯誤。
起始狀態：required email 為空，status 尚未顯示 validity。
validBefore=false、invalidCountBefore=1、reported=false；填入有效 email 後 validAfter=true。
驗收證據：validBefore=false、reported=false、invalidCountBefore=1、validAfter=true
submit handler 在建立 request 前判斷；自訂送出流程需要保留瀏覽器原生驗證回饋時。
常見混淆：checkValidity/reportValidity 不會替代後端驗證；使用者仍可繞過前端送出任意 request。
這段程式是理解起點，不是要你直接跳過 Starter。
checkValidity 是先問『能不能送』；reportValidity 除了回答，還會請瀏覽器把錯誤指給使用者看。
正式說法：HTMLFormElement.checkValidity() 執行 constraint validation 並回傳 validity；reportValidity() 同樣驗證，且對未取消的 invalid controls 顯示問題。
if (!form.checkValidity()) { form.reportValidity(); return; }每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/main.js 定位：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。」目前的缺口。
證據：保存 files/starter/main.js 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/main.js，且定位到 先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。。
檔案：files/starter/main.js 定位：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。
要做：對空 required email 執行兩種驗證，再填入有效 email 重驗並比較 :invalid 數量。
預期：validBefore=false、invalidCountBefore=1、reported=false；填入有效 email 後 validAfter=true。
證據：validBefore=false、reported=false、invalidCountBefore=1、validAfter=true
卡住先查：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。
檔案：files/starter/main.js 定位：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：validBefore=false、invalidCountBefore=1、reported=false；填入有效 email 後 validAfter=true。
證據：validBefore=false、reported=false、invalidCountBefore=1、validAfter=true
卡住先查：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先取得 Boolean；只有 false 時才需要呈現修正提示。
依序記錄 checkValidity、:invalid count、reportValidity，再填有效 email 重跑。
完整解答與原因：空 required email 時 checkValidity/reportValidity 都回 false 且 :invalid 有一項；填入 david@example.com 後重驗為 true，因為 constraint 已被滿足。