入力検証（Validation）

ブラウザのデフォルト動作またはカスタムスタイルとJavaScriptを介して、HTML5フォーム検証を使用してユーザーに有益で実用的なフィードバックを提供。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。

このページの項目

現在、クライアント側のカスタム検証スタイルとツールチップは支援技術に公開されていないため、アクセスができない。ソリューションの作成中は、サーバー側のオプションかデフォルトのブラウザ検証方法の使用を推奨。

使い方（How it works）

Bootstrapでフォーム検証がどのように機能するかは次のとおり：

HTMLフォームの検証は、CSSの2つの疑似クラス、:invalid と :valid を経由して適用。required 属性を持つ <input>, <select>, <textarea> 要素に適用。
Bootstrapは、:invalid と :valid スタイルを親の .was-validated クラスに適用する。通常は <form> に適用。それ以外の場合、値のない任意の必須フィールドは、ページのロード時に無効として表示。このようにして、それらをアクティブにするタイミングを選択できる（通常はフォームの送信が試行された後）。
フォームの外観をリセットするには（例：AJAXを使用した動的フォーム送信の場合）、提出後に再び <form> から .was-validated クラスを削除する。
フォールバックとして、.is-invalid クラスと .is-valid クラスをサーバー側の検証用の疑似クラスの代わりに使用できる。.was-validated 親クラスは必要ない。
CSSの仕組みの制約から、カスタムJavaScriptの助けを借りずにDOMのフォームコントロールの前にある <label> にスタイルの適用はできない。
すべての最新ブラウザは、フォームコントロールを検証する一連のJavaScriptメソッドであるThe constraint validation API（制約検証API）をサポート済。
フィードバックメッセージは、ブラウザのデフォルト（各ブラウザごとに異なり、CSS経由では変更できない）や追加のHTMLとCSSを使用したカスタムフィードバックスタイルを利用できる。
JavaScriptで setCustomValidity を使用してカスタムの有効性メッセージを提供できる。

これを念頭に置いて、カスタムフォームの検証スタイル、オプションのサーバー側の検証クラス、ブラウザのデフォルトに関する以下の見本を検討して下さい。

カスタムスタイル（Custom styles）v5.2.0設定変更

カスタムBootstrapフォーム検証メッセージの場合は、<form> に novalidate ブール値属性を追加する必要がある。これにより、ブラウザのデフォルトのフィードバックツールチップは無効になるが、JavaScriptのフォーム検証APIにはまだアクセスできない。以下のフォームで送信すると、BootstrapのJavaScriptは送信ボタンを傍受し、フィードバックを中継する。送信しようとすると、フォームコントロールに :invalid と :valid スタイルが適用される。

カスタムフィードバックスタイルでは、カスタムの色、枠線、フォーカススタイル、背景アイコンを適用して、フィードバックをよりよく伝える。<select> の背景アイコンは .form-select だけで利用でき、.form-control では利用できない。

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

HTML<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">名字</label>
    <input type="text" class="form-control" id="validationCustom01" value="ブート" required>
    <div class="valid-feedback">
      入力完了!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">名前</label>
    <input type="text" class="form-control" id="validationCustom02" value="太郎" required>
    <div class="valid-feedback">
      入力完了!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">ユーザー名</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        ユーザー名を選択して下さい
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom03" class="form-label">郵便番号</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      有効な郵便番号を入力して下さい
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">都道府県</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">選択...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      有効な都道府県を選択して下さい
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom5" class="form-label">住所</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      有効な住所を入力して下さい
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" value="" id="invalidCheck" required>
      <label for="invalidCheck" class="form-check-label">
        利用規約に同意する
      </label>
      <div class="invalid-feedback">
        提出する前に同意する必要があります
      </div>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">フォームを送信</button>
  </div>
</form>

※Bootstrap4.xの設定例赤背景が変更箇所

HTML<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">名字</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">名前</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">ユーザー名</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        ユーザー名を選択して下さい
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-3 mb-3">
      <label for="validationCustom03">郵便番号</label>
      ...
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">都道府県</label>
      ...
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom5">住所</label>
      ...
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      ...
    </div>
  </div>
  <button type="submit" class="btn btn-primary">フォームを送信</button>
</form>

Bootstrap5（5.2.0～）の設定例緑背景が5.2.0での変更箇所

JavaScript<script>
// 無効なフィールドがある場合にフォーム送信を無効にするスターターJavaScriptの例
(() => {
  'use strict'

  // Bootstrapカスタム検証スタイルを適用してすべてのフォームを取得
  const forms = document.querySelectorAll('.needs-validation')

  // ループして帰順を防ぐ
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

※Bootstrap5（5.1.3）の設定例赤背景が5.2.0での変更箇所

JavaScript<script>
// 無効なフィールドがある場合にフォーム送信を無効にするスターターJavaScriptの例
(function () {
  'use strict'

  // Bootstrapカスタム検証スタイルを適用してすべてのフォームを取得
  var forms = document.querySelectorAll('.needs-validation')

  // ループして帰順を防ぐ
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (form.checkValidity() === false) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false);
    });
})();
</script>

【設定】

ブラウザのデフォルトのフィードバックツールチップを無効にするため、<form> に novalidate 属性を入れる
検証したい <input> などのコントールに、required（入力必須）属性を入れる
有効時のフィードバックの文章は div.valid-feedback、無効時のフィードバックの文章は div.invalid-feedback で囲む（両方設定しても可）

【変更履歴】

【v5.0.0-alpha1】
- フォームレイアウトの設定変更
- インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
【v5.0.0-alpha3】（v4.6.0でバックポート）
- .input-group に .has-validation を追加（境界線の角丸が欠落するバグを解消）
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

ブラウザのデフォルト（Browser defaults）

カスタム検証のフィードバックメッセージやフォームの動作を変更するJavaScriptの作成に興味があるのなら、ブラウザのデフォルトを使用できる。以下のフォームに入力すると、使用しているブラウザとOSによって、多少異なるスタイルのフィードバックが表示される。

これらのフィードバックのスタイルはCSSでスタイル付けできないが、JavaScriptを使用してフィードバックテキストをカスタマイズできる。

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

<form class="row g-3">
  <div class="col-md-4">
    <label for="validationDefault01" class="form-label">名字</label>
    <input type="text" class="form-control" id="validationDefault01" value="ブート" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefault02" class="form-label">名前</label>
    <input type="text" class="form-control" id="validationDefault02" value="太郎" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefaultUsername" class="form-label">ユーザー名</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend2">@</span>
      <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationDefault03" class="form-label">郵便番号</label>
    <input type="text" class="form-control" id="validationDefault03" required>
  </div>
  <div class="col-md-3">
    <label for="validationDefault04" class="form-label"gt;都道府県</label>
    <select class="form-select" id="validationDefault04" required>
      <option selected disabled value="">選択...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="validationDefault05" class="form-label">住所</label>
    <input type="text" class="form-control" id="validationDefault05" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" value="" id="invalidCheck2" required>
      <label for="invalidCheck2" class="form-check-label">
        利用規約に同意する
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">フォームを送信</button>
  </div>
</form>

※Bootstrap4.xの設定例赤背景が変更箇所

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">名字</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">名前</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">ユーザー名</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroupPrepend2">@</span>
      </div>
      <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
    </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-3 mb-3">
      <label for="validationDefault03">郵便番号</label>
      ...
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">都道府県</label>
      ...
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault05">住所</label>
      ...
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      ...
    </div>
  </div>
  <button type="submit" class="btn btn-primary">フォームを送信</button>
</form>

【変更履歴】

【v5.0.0-alpha1】
- フォームレイアウトの設定変更
- インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に

サーバー側の検証（Server side）v5.0.0-alpha3設定変更

クライアント側の検証の使用を推奨するが、サーバー側の検証が必要な場合は無効や有効なフォームフィールドを .is-invalid と .is-valid で指定できる。.invalid-feedback もこれらのクラスでサポート済。

無効なフィールドの場合、aria-describeby を使用して、無効なフィードバック/エラーメッセージが関連するフォームフィールドに関連付けられていることを確認する（フィールドがすでに追加のフォームテキストを指している場合は、この属性で複数の id が参照できるので注意）。

境界線の角丸の問題を修正するには、インプットグループに .has-validation クラスの追加が必要。

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

<form class="row g-3">
  <div class="col-md-4">
    <label for="validationServer01" class="form-label">名字</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="ブート" required>
  </div>
  <div class="col-md-4">
    <label for="validationServer02" class="form-label">名前</label>
    <input type="text" class="form-control is-valid" id="validationServer02" value="太郎" required>
  </div>
  <div class="col-md-4">
    <label for="validationServerUsername" class="form-label">ユーザー名</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend3">@</span>
      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
      <div id="validationServerUsernameFeedback" class="invalid-feedback">
        ユーザー名を入力して下さい
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer03" class="form-label">郵便番号</label>
    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
    <div id="validationServer03Feedback" class="invalid-feedback">
      有効な郵便番号を入力して下さい
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer04" class="form-label">都道府県</label>
    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
      <option selected disabled value="">選択...</option>
      <option>...</option>
    </select>
    <div id="validationServer04Feedback" class="invalid-feedback">
      有効な都道府県を選択して下さい
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationServer05" class="form-label">住所</label>
    <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="住所" aria-describedby="validationServer05Feedback" required>
    <div id="validationServer05Feedback" class="invalid-feedback">
      有効な住所を入力して下さい
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input type="checkbox" class="form-check-input is-invalid" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label for="invalidCheck3" class="form-check-label">
        利用規約に同意する
      </label>
      <div id="invalidCheck3Feedback" class="invalid-feedback">
        提出する前に同意する必要があります
      </div>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">フォームを送信</button>
  </div>
</form>

※Bootstrap4.xの設定例赤背景が変更箇所

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">名字</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">名前</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">ユーザー名</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          ユーザー名を入力して下さい
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-3 mb-3">
      <label for="validationServer03">郵便番号</label>
      ...
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">都道府県</label>
      ...
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer05">住所</label>
      ...
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      ...
    </div>
  </div>
  <button type="submit" class="btn btn-primary">フォームを送信</button>
</form>

【設定】

あらかじめ有効状態にする場合は、<input>, <select> などのコントールに、.is-valid を入れる
あらかじめ無効状態にする場合は、<input>, <select> などのコントールに、.is-invalid を入れる

【アクセシビリティの設定】

input.is-invalid（または select.is-invalid）に aria-describedby 属性、div.invalid-feedback に id を追加して関連付ける

【変更履歴】

【v5.0.0-alpha1】
- フォームレイアウトの設定変更
- インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
【v5.0.0-alpha2】
- アクセシビリティの設定を追加（v4.5.1でバックポート）
【v5.0.0-alpha3】
- .input-group に .has-validation を追加（境界線の角丸が欠落するバグを解消）（v4.6.0でバックポート）

サポート済の要素（Supported elements）

検証スタイルは、次のフォームコントロールとコンポーネントで使用できる。

.form-control が入った <input> と <textarea>（インプットグループに最大1つの .form-control を含む）
.form-select が入った <select>
.form-check

見本各コントロールを入力して下さい

設定例

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">テキストエリア</label>
    <textarea class="form-control" id="validationTextarea" placeholder="必須のテキストエリアの例" required></textarea>
    <div class="invalid-feedback">
      テキストエリアにメッセージを入力して下さい。
    </div>
  </div>
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
    <label for="validationFormCheck1" class="form-check-label">このチェックボックスをチェック</label>
    <div class="invalid-feedback">無効時のフィードバックテキストの例</div>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
    <label for="validationFormCheck2" class="form-check-label">このラジオボタンを切替</label>
  </div>
  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
    <label for="validationFormCheck3" class="form-check-label">この他のラジオボタンに切替</label>
    <div class="invalid-feedback">無効時のフィードバックテキストの例</div>
  </div>

  <div class="mb-3">
    <select class="form-select" required aria-label="選択メニューの例">
      <option value="">この選択メニューを開く</option>
      <option value="1">１</option>
      <option value="2">２</option>
      <option value="3">３</option>
    </select>
    <div class="invalid-feedback">無効時のフィードバックテキストの例</div>
  </div>

  <div class="mb-3">
    <input type="file" class="form-control" id="validatedCustomFile" required>
    <div class="invalid-feedback">無効時のフィードバックテキストの例</div>
  </div>

  <div class="mb-3">
    <button type="submit" class="btn btn-primary" disabled>フォームを送信</button>
  </div>
</form>

【設定】

検証状態をあらかじめ表示しておくには、<form> に .was-validated を入れる

ツールチップ（Tooltips）

フォームレイアウトで許可されている場合は、.{valid|invalid}-feedback クラスを .{valid|invalid}-tooltip クラスに置き換えると、検証フィードバックをスタイル付きツールチップで表示できる。ツールヒントの位置を決めるため親要素に position: relative が入っているか確認して下さい。下記の例では、列クラスには既にこれがあるが、プロジェクトでは別の設定が必要な場合がある。

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip01" class="form-label">名字</label>
    <input type="text" class="form-control" id="validationTooltip01" value="ブート" required>
    <div class="valid-tooltip">
      入力完了!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">名前</label>
    <input type="text" class="form-control" id="validationTooltip02" value="太郎" required>
    <div class="valid-tooltip">
      入力完了!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltipUsername" class="form-label">ユーザー名</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
      <div class="invalid-tooltip">
        ユーザー名を入力して下さい
      </div>
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip03" class="form-label">郵便番号</label>
    <input type="text" class="form-control" id="validationTooltip03" required>
    <div class="invalid-tooltip">
      有効な郵便番号を入力して下さい 
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip04" class="form-label">都道府県</label>
    <select class="form-select" id="validationTooltip04" required>
      <option selected disabled value="">選択...</option>
      <option>...</option>
    </select>
    <div class="invalid-tooltip">
      有効な都道府県を選択して下さい
    </div>
  </div>
  <div class="col-md-6 position-relative">
    <label for="validationTooltip05" class="form-label">住所</label>
    <input type="text" class="form-control" id="validationTooltip05" required>
    <div class="invalid-tooltip">
      有効な住所を入力して下さい
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">フォームを送信</button>
  </div>
</form>

※Bootstrap4.xの設定例赤背景が変更箇所

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">名字</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">名前</label>
      ...
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">ユーザー名</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          ユーザー名を入力して下さい
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-3 mb-3">
      <label for="validationTooltip03">郵便番号</label>
      ...
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">都道府県</label>
      ...
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip05">住所</label>
      ...
    </div>
  </div>
  <button class="btn btn-primary" type="submit">フォームを送信</button>
</form>

【設定】

有効時のフィードバックの文章は div.valid-tooltip、無効時のフィードバックの文章は div.invalid-tooltip で囲む（両方設定しても可）
親要素は position: relative である必要がある（上記の設定では各 .col-md-* に .position-relative を追加する）

【注意】

別途JavaScriptの実行コードが必要

【変更履歴】

【v5.0.0-alpha1】
- フォームレイアウトの設定変更
- .form-row が廃止になったので、各 .col-md-* に .position-relative を追加し、空白ユーティリティクラス（.mb-3）は削除
- インプットグループのアドオン部分を囲む div.input-group-{prepend|append} は不要に
【v5.0.0-alpha3】（v4.6.0でバックポート）
- .input-group に .has-validation を追加（境界線の角丸が欠落するバグを解消）

Sass v5.0.0-beta2追加、v5.0.0-beta3「検証状態のカスタマイズ」から変更

変数（Variables）

デフォルトの設定

scss/_variables.scss 内 form-feedback-variables の設定$form-feedback-margin-top:          $form-text-margin-top;
$form-feedback-font-size:           $form-text-font-size;
$form-feedback-font-style:          $form-text-font-style;
$form-feedback-valid-color:         $success;
$form-feedback-invalid-color:       $danger;

$form-feedback-icon-valid-color:    $form-feedback-valid-color;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

mixin（Mixins）

2つのmixinがループを経由して結合され、フォーム検証フィードバックスタイルを生成。

デフォルトの設定

scss/mixins/_forms.scss 内 form-validation-mixins の設定@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    .was-validated #{if(&, "&", "")}:#{$state},
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

@mixin form-validation-state(
  $state,
  $color,
  $icon,
  $tooltip-color: color-contrast($color),
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
  .#{$state}-feedback {
    display: none;
    width: 100%;
    margin-top: $form-feedback-margin-top;
    @include font-size($form-feedback-font-size);
    font-style: $form-feedback-font-style;
    color: $color;
  }

  .#{$state}-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%; // 可能な場合は親要素に含める
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
    margin-top: .1rem;
    @include font-size($form-feedback-tooltip-font-size);
    line-height: $form-feedback-tooltip-line-height;
    color: $tooltip-color;
    background-color: $tooltip-bg-color;
    @include border-radius($form-feedback-tooltip-border-radius);
  }

  @include form-validation-state-selector($state) {
    ~ .#{$state}-feedback,
    ~ .#{$state}-tooltip {
      display: block;
    }
  }

  .form-control {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-image: escape-svg($icon);
        background-repeat: no-repeat;
        background-position: right $input-height-inner-quarter center;
        background-size: $input-height-inner-half $input-height-inner-half;
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }
    }
  }

  // stylelint-disable-next-line selector-no-qualifying-type
  textarea.form-control {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
      }
    }
  }

  .form-select {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        padding-right: $form-select-feedback-icon-padding-end;
        background-image: escape-svg($form-select-indicator), escape-svg($icon);
        background-position: $form-select-bg-position, $form-select-feedback-icon-position;
        background-size: $form-select-bg-size, $form-select-feedback-icon-size;
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }
    }
  }

  .form-check-input {
    @include form-validation-state-selector($state) {
      border-color: $color;

      &:checked {
        background-color: $color;
      }

      &:focus {
        box-shadow: $focus-box-shadow;
      }

      ~ .form-check-label {
        color: $color;
      }
    }
  }
  .form-check-inline .form-check-input {
    ~ .#{$state}-feedback {
      margin-left: .5em;
    }
  }
}

マップ（Map）

下記は scss/_variables.scss からの検証Sassマップである。これを再定義か拡張して異なる状態または追加の状態を生成。

デフォルトの設定

scss/_variables.scss 内 form-validation-states の設定$form-validation-states: (
  "valid": (
    "color": $form-feedback-valid-color,
    "icon": $form-feedback-icon-valid
  ),
  "invalid": (
    "color": $form-feedback-invalid-color,
    "icon": $form-feedback-icon-invalid
  )
);

$form-validation-states のマップには、ツールチップとフォーカスのスタイルを再定義するための3つのオプションのパラメーターが組み込める。

ループ（Loop)

$form-validation-states マップ値を反復処理して、検証スタイルを生成するために使用される。上記のSassマップへの変更は、このループを経由してコンパイルされたCSSに反映される。

デフォルトの設定 v5.0.0-beta2変更

scss/forms/_validation.scss 内 form-validation-states-loop の設定@each $state, $data in $form-validation-states {
  @include form-validation-state($state, $data...);
}

【変更履歴】

【v5.0.0-beta2】
- ツールチップとフォーカスのスタイルを再定義するため、form-validation-states mixinに新しく3つのオプションパラメータ tooltip-color, tooltip-bg-color, focus-box-shadow を追加（これらのパラメータは、$form-validation-states マップで設定可能）

カスタマイズ（Customizing）

検証状態は $form-validation-states マップを使ってSassでカスタマイズできる。Bootstrapの scss/_validation.scss ファイルにあるこのSassマップは、デフォルトの valid/invalid 検証状態を生成する方法であり、各状態の色、アイコン、ツールチップの色、フォーカスの陰影をカスタマイズするために入れ子状のマップが入っている。ブラウザでサポートされている他の状態は入ってないが、カスタムスタイルを使用している状態では、より複雑なフォームフィードバックが簡単に追加できる。

前のページ
フォーム・レイアウト

次のページ
ページがありません

入力検証（Validation）

使い方（How it works）

カスタムスタイル（Custom styles）v5.2.0設定変更

見本 このまま送信ボタンを押して下さい

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

Bootstrap5（5.2.0～）の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5（5.1.3）の設定例 赤背景が5.2.0での変更箇所

【設定】

【変更履歴】

ブラウザのデフォルト（Browser defaults）

見本 このまま送信ボタンを押して下さい

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【変更履歴】

サーバー側の検証（Server side）v5.0.0-alpha3設定変更

見本 このまま送信ボタンを押して下さい

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

サポート済の要素（Supported elements）

見本 各コントロールを入力して下さい

設定例

【設定】

ツールチップ（Tooltips）

見本 このまま送信ボタンを押して下さい

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【注意】

【変更履歴】

Sass v5.0.0-beta2追加、v5.0.0-beta3「検証状態のカスタマイズ」から変更

変数（Variables）

デフォルトの設定

mixin（Mixins）

デフォルトの設定

マップ（Map）

デフォルトの設定

ループ（Loop)

デフォルトの設定 v5.0.0-beta2変更

【変更履歴】

カスタマイズ（Customizing）

ページ移動

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5（5.2.0～）の設定例緑背景が5.2.0での変更箇所

※Bootstrap5（5.1.3）の設定例赤背景が5.2.0での変更箇所

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

見本各コントロールを入力して下さい

見本このまま送信ボタンを押して下さい

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所