文章前提

Form 表單、Validation 表單驗證方式

Form 表單兩大重點

  • Class 套在哪個標籤上
  • HTML5 表單觀念
    • input 中的 type 請使用正確

Form 表單

CH7 63
課程練習下載
Bootstrap 路徑 : Components / Forms

| Forms 基本架構 | 範例

  • 最外層以 <form> 包覆

  • <label> 內的 for 會對應 <input> 內的 id

  • 一般 <input> 欄位

    • .form-group 包覆, <input> Class 為 .form-control
<div class="form-group">
    <label for="exampleEmail1" class="">Email</label>
    <input type="email" class="form-control" placeholder="Enter email" id="exampleEmail1">
    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
  • <check>

    • check 內的 Class 和其它欄位不同,要注意 ! !
    • .form-chrck 包覆, <input> Class 為 .form-check-input<lable> Class 為 .form-check-label
      Bootstrap-Form表單check-示意圖
  • 單選型 <select>

Bootstrap-Form表單單選select示意圖

  • 多選型 <select>
    • 範例
    • 與單選不同的是,多選型 <select> 內需加入 multiple

Bootstrap-Form表單多選select示意圖

  • textarea

Bootstrap-Form表單textarea示意圖

<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

| Sizing | 範例

  • .form-control-sm , .form-control-lg 來設定高度
  • 可帶入 <input><select>

Validation 表單驗證方式

CH7 64
課程練習下載
Bootstrap 路徑 : Components / Forms – Validation_Custom Style

| Forms 基本架構 | 範例

| 驗證方式分 |

  • 瀏覽器驗證 範例
    • :valid:invalid 偽元素,分別代表 <input> 成功與否顯示綠色與紅色
    • 透過 JavaScript 觸發 HTML5 的表單驗證 API
    • 是用 script 去觸發表單這段 <form class="needs-validation" novalidate> 還未驗證,請它驗證完再提供回饋。 所以先給予 .needs-validation & 加上 novalidate 代表表單還未驗證,表單內還未驗證的內容請不要顯示出來
    • 等著顯示錯誤回饋的部分和伺服器端驗證一樣使用 .invalid-feedback ,正確回饋的部分使用 .valid-feedback ,但畫面上不會顯示出來,要啟用瀏覽器驗證請把 <script> 內的內容貼入即可。
    • 如果要有觸發驗證功能,<input> 一定要加上 required ,不然就不會觸發驗證。
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);})();

</script>
  • Server 伺服器端驗證 範例
    • 因伺服器無法抓到 :valid:invalid 所以需手動加上 .is-invalid ( 驗證失敗 ).is-valid ( 驗證成功 ) 替換掉瀏覽器驗證的兩個偽元素
    • 驗證成功的 <input> 加上 .is-valid ,會呈現綠色外框 ;驗證失敗的 <input> 加上 .is-novalid 會呈現紅色外框

//驗證失敗示意圖 ▼
Bootstrap-Form表單Server-伺服器端驗證失敗

//驗證失敗成功圖 ▼
Bootstrap-Form表單Server-伺服器端驗證成功

/

瀏覽器驗證自我統整 : 範例

  1. 使用 Validation_Custom Style 方式
  2. form 加上 <script> 內的 ClassName 與 novalidate 讓表單內還未驗證的內容不要顯示出來
  3. HTML 內加上 Bootstrap 提供的 <script> ,請它驗證完給予提供回饋。
  4. <input> 想要在輸入錯誤時顯示文字或是輸入成功後顯示文字,分別於文字外層加上 .invalid-feedback.valid-feedback
  5. <input> 加上 required 才能觸發驗證功能

伺服器驗證自我統整 :

  1. form 中依需求加入 <label> <input>
  2. 如果想要顯示驗證失敗,於 <input> 加入 .is-invalid ;顯示正確訊息則於 <input> 加入 .is-valid

資料來源

最後修改日期: 13 5 月, 2020

作者