## Bootstrap Validation
Bootstrap 有提供簡易的[表單驗證](https://getbootstrap.com/docs/5.3/forms/validation/)，透過添加 `.was-validated` class 搭配 `:invalid`、 `:valid` 呈現驗證樣式與訊息

### 自定義樣式
要自定義驗證訊息樣式需要在 `<form>` 加入 `novalidate` 屬性，消除瀏覽器[預設回饋提示框](https://getbootstrap.com/docs/5.3/forms/validation/#browser-defaults)，以及加入 class `.needs-validation` 並在需要驗證的欄位 `<input>`、`<select>`、`<textarea>` 加入 `required` 屬性，
而驗證訊息則寫在欄位下方 `div.invalid-feedback` 區塊中。

#### 效果呈現
這邊運用 jQuery，當點擊按鈕元素時加入 `.was-validated` class，呈現出驗證訊息樣式

// 每個有 .needs-validation 的 <form> 元素，觸發 submit 事件時，
// 將該元素加入 class 'was-validated'
$('.needs-validation').each(function(index) {
  $(this).on('submit', function(e) {
    e.preventDefault();
    $(this).addClass('was-validated');
  });
});

> 記得載入 [jQuery CDN](https://code.jquery.com/jquery-3.7.0.min.js)

此時就可以呈現出 Bootstrap 預設表單驗證樣式，觀看[範例](https://codepen.io/hexschool/pen/WNYBgqW)

#### 修改樣式
可以使用開發人員工具觀看，Bootstrap 使用
`.was-validated .form-control:valid`、`.was-validated .form-control:invalid` 來設定欄位通過與未通過驗證的樣式，
我們可以直接以此來自定義樣式覆蓋 Bootstrap 的設定。
像是：

/* 通過驗證樣式 */
.was-validated .form-control:valid,
.was-validated .form-control:valid:focus {
  border-color: #0d6efd;
  box-shadow: none;
}
/* 未通過驗證樣式 */
.was-validated .form-control:invalid,
.was-validated .form-control:invalid:focus {
  background-color: #000;
}

> 可以嘗試加到上方範例觀察看看

### 題目

嘗試使用 Bootstrap Validation 做出第六週設計稿上會員登入區塊，如圖：

<img src="https://hackmd.io/_uploads/ryPuuCl2h.png" width="400" style="margin-bottom: 8px;">

**未輸入帳號密碼**，點選登入時會呈現：
<img src="https://hackmd.io/_uploads/BkXkFAe23.png" width="400">

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/VwVJPeg
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:--:|:--------------:|:-------------------------------------------------------------:|
| 01 |Berlin|[CodePen](https://codepen.io/3qberlin/pen/oNJgxQx)|
| 02 |Vic_Liou|[CodePen](https://codepen.io/allenliou-java/pen/ExGaKGx)|
| 03 | bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/dywPMKM)|
| 04 | Ann Chou |[CodePen](https://codepen.io/annchou_illu/pen/JjwoXwY)|
| 05 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/JjwoXqG) |
| 06 | Atsushi#6888 |[CodePen](https://codepen.io/atsushi-amuro/pen/yLGyOZZ)|
| 07 | ann6212 |[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/eYbmZQa)|
| 08 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/rNoaeRX) |
| 09 | cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/abPzZmZ)|
| 10 | Eden |[Codepen](https://codepen.io/iseden/pen/bGONepm)|
| 11 | Moreene |[CodePen](https://codepen.io/Moreene/pen/LYMEZxW?editors=1010)|
| 12 | pinyi_9 |[Codepen](https://codepen.io/Wpypy/pen/JjwoKjX)|
| 13 | shcopy |[CodePen](https://codepen.io/shcopy/pen/KKbwMvO)|
| 14 | townyuan |[CodePen](https://codepen.io/townyuan/pen/JjwoKYK)|
| 15 | kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/yLGyJKy)|
| 16 | ovo.yun |[CodePen](https://codepen.io/yun-the-scripter/pen/rNoaMew?editors=1100)|
| 17 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/WNLbwKJ) |
| 18 | meowmeow |[CodePen](https://codepen.io/snow1224/pen/mdayrKb)|
| 19 | AYA | [CodePen](https://codepen.io/NoNameNote/pen/yLGyVBv) |
| 20 | Tami | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/zYyxoNe) |
| 21 | Uli | [CodePen](https://codepen.io/uli1313/pen/WNLboEd) |
| 22 | hao2485 | [CodePen](https://codepen.io/Seanfeb16/pen/wvRBoeq) |
| 23 | SmallP | [CodePen](https://codepen.io/smallp/pen/PoXwNrE) |
| 24 | SKey | [CodePen](https://codepen.io/Dale-Chien/pen/mdayRXK) |
| 25 | yunhsinnnnnnn |[CodePen](https://codepen.io/yun___hsin/pen/QWzwpBd)|
| 26 | ming0712 |[CodePen](https://codepen.io/StevenHuang/pen/XWoJRzG)|
| 27 | Jules Hsu |[CodePen](https://codepen.io/cjntfsoq-the-animator/pen/JjwoJjX)|
| 28 | orias_000 |[CodePen](https://codepen.io/qoq77416416/pen/jOXEwoE)|
| 29 | yu.t_liu |[CodePen](https://codepen.io/YuT200053/pen/ExGaXrW)|
| 30 | hannahTW |[CodePen](https://codepen.io/hangineer/pen/ZEVYpMv)|
| 31 | soniawu |[CodePen](https://codepen.io/YUJOU/pen/vYvEpEV)|
| 32 | rjjq |[CodePen](https://codepen.io/rjjq/pen/OJrPwar)|
| 33 | Yu |[CodePen](https://codepen.io/yuch3n_chen/pen/WNLbRrY)|
| 34 | deli0529 |[CodePen](https://codepen.io/delichaomoon/pen/zYyxLbN)|
| 35 | lychee_kk |[CodePen](https://codepen.io/kakakala/pen/mdayWad)|
| 36 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/WNLbaPJ) |
| 37 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/MWZYMzw) |
| 38 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/abPOoWX) |
| 39 | m_m |[CodePen](https://codepen.io/minnn7716/pen/QWzbLZm)|
| 40 | jacky7035 |[CodePen](https://codepen.io/adens123/pen/qBLdqvB)|
| 41 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/vYvOVvL) |
| 42 | runweiting |[CodePen](https://codepen.io/weiting14/pen/QWzbzbX)|
| 43 | wind |[CodePen](https://codepen.io/wind7y/pen/abPvwQv)|
| 44 | tanuki5863 |[CodePen](https://codepen.io/tanuki320/pen/BavomwJ)|
| 45 | peggy3169 |[CodePen](https://codepen.io/peggylai/pen/VwqvqrQ)|
| 46 | cura |[CodePen](https://codepen.io/curalin/pen/bGOEGGW?editors=1100)|
| 47 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/ZEVbxOm) |
| 48 | adele6199 |[CodePen](https://codepen.io/codepen-io-winnie/pen/abPdyym)|
| 49 | .icesam |[CodePen](https://codepen.io/icesam/pen/xxmZMGX)|
| 50 | Kimi |[CodePen](https://codepen.io/kimihu91/pen/abPdMqr)|
| 51 | Randy |[CodePen](https://codepen.io/landy510/pen/bGOwJEg?editors=1100)|
| 52 | 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/YzdNPvz)|
| 53 | RX00#5351 |[CodePen](https://codepen.io/llqzknqv-the-styleful/pen/RwEKyvP)|
| 54 | 歐陽龍龍#1061 |[CodePen](https://codepen.io/dizzydog-rgb/pen/MWZJXQx)|
| 55 | sinsaki225 |[CodePen](https://codepen.io/a8322342/pen/RwEpxov)|
| 56 | Long |[CodePen](https://codepen.io/Loonng/pen/gOZmoGV?editors=1010)|
| 57 | patrickpie |[CodePen](https://codepen.io/patrickpie/pen/NWeYgeP?editors=1100)|

<!-- 快速複製格式

| 00 | name |[CodePen]()|

-->