使い方(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.0.0-alpha3設定変更
カスタム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 class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
利用規約に同意する
</label>
<div class="invalid-feedback">
提出する前に同意する必要があります
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">フォームを送信</button>
</div>
</form>
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>
※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>
【設定】
- ブラウザのデフォルトのフィードバックツールチップを無効にするため、
<form>
にnovalidate
属性を入れる - 検証したい
<input>
などのコントールに、required
(入力必須)属性を入れる - 有効時のフィードバックの文章は
div.valid-feedback
、無効時のフィードバックの文章はdiv.invalid-feedback
で囲む(両方設定しても可)
【変更履歴】
ブラウザのデフォルト(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 class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
利用規約に同意する
</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>
サーバー側の検証(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 class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
利用規約に同意する
</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
を追加して関連付ける
【変更履歴】
サポート済みの要素(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 class="form-check-label" for="validationFormCheck1">このチェックボックスをチェック</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 class="form-check-label" for="validationFormCheck2">このラジオボタンを切替</label>
</div>
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck3">この他のラジオボタンに切替</label>
<div class="invalid-feedback">無効時のフィードバックテキストの例</div>
</div>
<div class="mb-3">
<select class="form-select" required aria-label="選択メニューの例">
<option value="">この選択メニューを開く</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">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
を追加する)
【変更履歴】
検証状態のカスタマイズ(Customizing)v5.0.0-beta2変更
検証状態は $form-validation-states
マップを使ってSassでカスタマイズ可能。Bootstrapの scss/forms/_validation.scss
ファイルにあるこのSassマップは、デフォルトの valid
/invalid
検証状態を生成する方法であり、各状態の色、アイコン、ツールチップの色、フォーカスシャドウをカスタマイズするために入れ子状のマップが入っている。ブラウザでサポートされている他の状態は入ってないが、カスタムスタイルを使用している状態では、より複雑なフォームフィードバックが簡単に追加可能。
form-validation-state
mixinを変更せずにこれらの値をカスタマイズすることは推奨しない。
下記は scss/forms/_variables.scss
のSassマップである。これを上書きしSassを再コンパイルしてさまざまな状態を生成する。
デフォルトの設定
scss/forms/_variables.scss 内$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つのオプションのパラメーターが組み込み可能。
下記は、scss/forms/_validation.scss
からのループ。上記のSassマップへの変更は、このループを経由してコンパイル済みCSSに反映される。
デフォルトの設定 v5.0.0-beta2変更
scss/forms/_validation.scss 内@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
【変更履歴】
- 【v5.0.0-beta2】
- ツールチップとフォーカスのスタイルを上書きするため、
form-validation-state
mixinに新しく3つのオプションパラメータtooltip-color
,tooltip-bg-color
,focus-box-shadow
を追加(これらのパラメータは、$form-validation-states
マップで設定可能)
- ツールチップとフォーカスのスタイルを上書きするため、
ページ移動
フォーム・レイアウト次のページ
ページがありません