Starter · code-edit

checkValidity() 與 reportValidity()

先看見缺口，再完成一個小修改。

Starter 要做什麼

先看見缺口，再完成一個小修改。

本主題檔案：files/main.js

定位：先在 Console 執行 form.checkValidity()，再用 form.querySelectorAll(':invalid') 找欄位。

頁面不會替你修改檔案；請在實作檔完成後重新整理確認。

required email 為空，status 尚未顯示 validity。

validBefore=false、invalidCountBefore=1、reported=false；填入有效 email 後 validAfter=true。

if (!form.checkValidity()) { form.reportValidity(); return; }

只在本階段資料夾內操作，避免改到其他章節。

index.html
階段入口：說明本階段結果，並以真實相對路徑連到 contact.html。
contact.html
表單頁：提供 label、欄位、原生驗證、submit 與狀態觀察位置。
style.css
呈現層：提供表單欄位、status、disabled、focus 與窄版可讀性。
main.js
行為層：處理 submit、preventDefault、mock Promise 與 idle/loading/success/error 狀態。

證據：validBefore=false、reported=false、invalidCountBefore=1、validAfter=true