Solution 要做什麼
對照完整答案、責任邊界與原因。
本主題檔案：files/main.js
定位：先執行 input.checkValidity()，再分開讀 matches(':invalid') 與 matches(':user-invalid')。
Solution · code-edit
:invalid 與 :user-invalid
對照完整答案、責任邊界與原因。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
email required 且 value 空白，data-valid-value 提供 student@example.com。
預期看到
required facts invalidBefore=true、userInvalidAfter=true、validAfter=true。
input:invalid{border-color:#b42318}input:user-invalid{background:#fff1f0}檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
P0 專章可執行入口。style.css
P0 專章樣式與狀態證據。main.js
P0 專章互動與 Console 證據。
證據：invalidBefore=true、userInvalidAfter=true、validAfter=true
回到主題說明