メインコンテンツへスキップ

入力検証（Validation）

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

目次

 

使い方（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 で囲む（両方設定しても可）
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-alpha3】（v4.6.0でバックポート）
    • .input-group に .has-validation を追加（境界線の角丸が欠落するバグを解消）

 

ブラウザのデフォルト（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 を追加して関連付ける
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-alpha2】（v4.5.1でバックポート）
    • アクセシビリティの設定を追加
  • 【v5.0.0-alpha3】（v4.6.0でバックポート）
    • .input-group に .has-validation を追加（境界線の角丸が欠落するバグを解消）

 

サポート済みの要素（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">１</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 を追加する）
【変更履歴】
  • 【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 を追加（境界線の角丸が欠落するバグを解消）

 

検証状態のカスタマイズ（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 マップで設定可能）
次のページ
ページがありません