Bootstrapのチェックボックスやラジオボタンにエラーメッセージを表示させる方法！
この記事では、Bootstrapのチェックボックスやラジオボタンなどのフォームにエラーメッセージを表示する方法を解説しています。フォームで予期されていない入力があった時などに、Bootstrapを使ってエラーメッセージを表示できるようになります。
Bootstrapのチェックボックスやラジオボタンにエラーメッセージを表示させたい
フォームで予期されていない入力があった時などにエラーメッセージを表示したい場合があります。
例えば入力が必須の欄に、何も入力されていなかった場合にバリデーションをかけて失敗したときのメッセージを出したいといった場合です。
そのような場合にBootstrapを使ってエラーメッセージを表示する方法を解説します！
Bootstrapのチェックボックスやラジオボタンにエラーメッセージを表示させる方法
基本のエラーメッセージ
一つのフォームにエラーメッセージを表示したい場合は、以下のように記述します！
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback">
ユーザーネームを入力してください。
</div>まず、input要素に.is-invalidクラスを追記します。これを追記するとフォームの色が赤くなります。
次に、div要素を作成し.invalid-feedbackというクラスを適用します。そしてその中身にエラーメッセージを記述します。
実際の開発では、PHPやRubyなどサーバーサイドの言語などでエラーがあった際にinput要素に.is-invalidを追記するようにしましょう。
チェックボタンやラジオボタン
選択式のボタンがいくつかあり、それら全てにメッセージを表示するのではなく、まとめて1つ表示したい場合はどうすればよいでしょうか。
先ほどと同じやり方をすると、このようにradioボタン1つ1つに対してエラーメッセージがたくさん表示されてしまいます。
これを回避するには、以下のように記述します。
ラジオボタンでエラーメッセージを表示する
<div class="form-check is-invalid">
<input class="form-check-input is-invalid" type="radio" name="radio1" id="radio1a">
<label class="form-check-label" for="radio1a">選択肢1</label>
</div>
<div class="form-check is-invalid">
<input class="form-check-input is-invalid" type="radio" name="radio2" id="radio1b">
<label class="form-check-label" for="radio1b">選択肢2</label>
</div>
<div class="form-check is-invalid">
<input class="form-check-input is-invalid" type="radio" name="radio3" id="radio1c">
<label class="form-check-label" for="radio1c">選択肢3</label>
</div>
<div class="invalid-feedback">
選ばれていません
</div>inputタグの親要素のdiv要素にも.is-invalidクラスを追記して、すべてのラジオボタンの下に.invalid-feedbackクラスを適用したdiv要素を作成し、エラーメッセージを書きます。
こうすることで、すべてのボタンに対してのエラーメッセージを一つ表示することができます。
一番下のボタンのみにエラーメッセージを書いて表示させて同じような見た目にすることもできますが、あまり良いコードとは言えないので、このやり方を使ったほうが良いでしょう。
チェックボックス(checkbox)でも同様にしてエラーメッセージを表示できます。
(上記のコードのtype属性をradioからcheckboxに変更すればできます。)
エラーメッセージのデザインいろいろ
Bootstrapでは、エラーメッセージのデザインがいくつか用意されています。それを紹介します！
このデザインを使用するには、メッセージを入れるdiv要素に.alartクラスを適用します。そしてこの.alartクラスを適用したdiv要素に.alart-〇〇というクラスを追記することで、デザインを変えることができます。
また、×印のボタンを作成して、そのボタンで閉じるメッセージや、メッセージ中にリンクを作成することもできます。
.alert-dismissibleというクラスを追記することでメッセージに閉じるボタンを追加することができます。
リンクを作成する場合には、a要素に.alert-linkというクラスを適用させます。
