- 可惡還是沒有寫完啊啊啊，明天繼續...
1.1 hw1 留言板任務：
「input 為空或 check 沒勾跳紅字，不然就 alert 所有填寫資料」
影片：參考範例：hw1 表單驗證（請先寫完作業再看）
參考範例：hw1 表單驗證（請先寫完作業再看）
遇到的問題：
- 我在寫 input 欄位的時候，把手機號碼設為 type="tel", 電子郵件設為 type="email"，當我照著老師的邏輯做時，我當然抓不到所有 type="text" 的東西，因為一開始做的有問題
檢查所有必要輸入欄位是否為空
- 如果為空，顯示紅字
- 全部填完，顯示 alert
1'47": 先在 CSS 顯示紅字
3'00": 先偵測 submit 事件，addEventListener
- 把事件放在 form 的送出功能 （submit） 上才對，只加在按鈕不行（因為按 enter 也可以送出），所以我們要阻止的是送出功能
- 接著先阻止 submit 預設事件
5'00" 看表單有沒有填內容
- 去拿 required 底下的 text
- checkbox 額外處理，因為性質不同
7'30" 修表單 html 結構，required 要在上一層，才能取到 required 底下的東西
8'15" 操作 input 的資料
9'00" 沒有填就加錯誤訊息
12'50" 沒有填就加錯誤訊息，比較好的做法
- 13'38" 先在 html 加上想要顯示的訊息
- 14'00" hide error
- 14'36" - 19'35" hide error + 調整高度
- display: none and visibility: hidden
- 用 visibility: hidden 就不會影響高度了，因為他本來就在畫面上，只是看不到而已
19'52": 拿到輸入訊息資料
21'45": 對 checkbox 做檢查
26'34": 兩種檢查方法的差別：
- 找所有 required 底下的 input 判斷裡面有沒有值，找到 parent 加 css class，顯示或不顯示錯誤
- 去找所有 required 的 div，往下找 radio
27'19" 重構程式碼
- 找 required 底下的東西
32'20": 重整邏輯，重點是選對東西
34'30": alert 填好的資料
36'20": 整理邏輯
- 對 form 加 submit 事件
- 看欄位驗證沒有有過
- 去找 required 元素
- 底下元素如果是 input 把 value 放進去，反之則出現錯誤訊息
- 如果是 radio，有就把 value 放進去
- 最後面統一檢查有沒有過驗證
- 38'30": 解釋擴充性
