Bootstrapのフォームバリデーション完全解説 invalid-feedback valid-feedback配置ベストプラクティス

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでフォームを作ったのですが、エラーメッセージをどこに書けばいいのかわかりません」

先生

「Bootstrapには入力エラーや成功を表示する仕組みが用意されています。invalid feedbackやvalid feedbackを使うことで見やすいフォームを作れます。」

生徒

「エラーを表示する場所にルールはあるのですか」

先生

「配置にはおすすめの書き方があります。ユーザーが迷わないフォームを作るためにとても重要です。順番に解説していきましょう。」

1. Bootstrapフォームバリデーションとは何か

Bootstrapフォームバリデーションとは、入力フォームに正しく情報が入力されたか確認し、エラーや成功を画面に表示する仕組みです。バリデーションとは入力内容を確認する処理のことを意味します。例えばメールアドレスの入力欄に数字だけ入力した場合、正しくない内容として警告を表示します。

フォームは問い合わせページや会員登録画面などで必ず使われます。入力内容が正しくないとシステムに登録できず、ユーザーは混乱します。そのため入力エラーをわかりやすく表示することは使いやすさを高める重要なポイントです。

Bootstrapでは入力状態に応じてスタイルを自動で変更できます。入力エラーがある場合は赤色で表示され、入力が正しい場合は緑色で表示されます。この視覚的な変化により初心者でも状況をすぐに理解できます。

2. invalid feedbackとvalid feedbackの役割

invalid feedbackは入力エラー時に表示されるメッセージです。例えば必須項目を入力し忘れた場合に表示されます。一方valid feedbackは入力内容が正しい場合に表示されるメッセージです。

この二つを使い分けることでユーザーは現在の入力状況を理解できます。例えるなら答案用紙の丸やバツのような役割を持っています。丸がvalid feedbackで、バツがinvalid feedbackです。

Bootstrapでは特定のクラスを使うだけで簡単に表示できます。クラスとは見た目や動きを指定するための名前付き設定のことです。HTMLにクラスを書くことでスタイルが自動的に適用されます。


<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label class="form-label">名前</label>
        <input type="text" class="form-control" required>
        <div class="invalid-feedback">
            名前を入力してください
        </div>
        <div class="valid-feedback">
            正しく入力されています
        </div>
    </div>
    <button class="btn btn-primary">送信</button>
</form>

ブラウザ表示

3. エラーメッセージ配置の基本ルール

invalid feedbackとvalid feedbackは入力フォームの直後に配置するのが基本です。直後とは入力欄のすぐ下に書くことを意味します。この配置にすることでユーザーはどの入力欄に問題があるのか瞬時に理解できます。

もしメッセージを別の場所に表示すると、どの入力欄のエラーなのか分かりにくくなります。特にスマートフォンでは画面が小さいため、エラーの位置がずれると使いにくいフォームになります。

また入力欄と同じグループ内に配置することも大切です。グループとは入力欄とラベルやメッセージをまとめた箱のことです。このまとまりがあることで見やすさが向上します。


<div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control" required>
    <div class="invalid-feedback">
        正しいメール形式で入力してください
    </div>
</div>

ブラウザ表示

4. form group構造を使ったベストプラクティス

Bootstrapではフォームを整理するためにグループ構造を使用します。グループ構造とは関連する要素をまとめる設計方法です。これにより画面が整い読みやすくなります。

フォームグループの中にラベル入力欄エラーメッセージをまとめることで、ユーザーは自然な流れで入力できます。これは文章の段落と同じ考え方です。段落が整理されている文章は読みやすく理解しやすい特徴があります。

Bootstrapではmbというクラスを使うと上下の余白を簡単に設定できます。余白とは要素同士の間隔のことです。余白を適切に取ることで見やすいフォームになります。


<form>
    <div class="mb-3">
        <label class="form-label">パスワード</label>
        <input type="password" class="form-control" required minlength="6">
        <div class="invalid-feedback">
            六文字以上で入力してください
        </div>
    </div>
</form>

ブラウザ表示

5. JavaScriptを使ったバリデーション制御

BootstrapのバリデーションはJavaScriptと組み合わせることでより便利に使えます。JavaScriptとは画面の動きを制御するプログラム言語です。フォーム送信時に入力チェックを行いエラーメッセージを表示できます。

needs validationというクラスを使用すると、送信時に入力チェックを実行できます。またnovalidate属性を使うことでブラウザ標準のチェックを停止しBootstrapのスタイルを利用できます。


<script>
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
    .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()
</script>

ブラウザ表示

6. チェックボックスや選択フォームでの配置方法

入力欄だけでなくチェックボックスや選択リストでもエラーメッセージを表示できます。チェックボックスとは複数の選択肢から選ぶ入力形式です。選択リストは候補の中から一つ選択する入力方法です。

これらの場合は入力欄の直後ではなくチェックグループ全体の下にメッセージを表示すると見やすくなります。複数項目をまとめて説明できるためユーザーが理解しやすくなります。


<div class="form-check">
    <input class="form-check-input" type="checkbox" required>
    <label class="form-check-label">
        利用規約に同意する
    </label>
    <div class="invalid-feedback">
        同意が必要です
    </div>
</div>

ブラウザ表示

7. アクセシビリティを考えたエラーメッセージ設計

アクセシビリティとは誰でも利用しやすい設計のことです。視覚が弱い人や高齢者にも配慮したフォーム設計が求められます。色だけでエラーを判断するのではなく、文章でも説明することが大切です。

またaria属性を追加すると画面読み上げ機能に対応できます。読み上げ機能とは文字を音声で読み上げる支援機能です。この対応により多くの利用者が快適にフォームを使用できます。


<div class="mb-3">
    <label class="form-label">電話番号</label>
    <input type="tel" class="form-control" required aria-describedby="telError">
    <div id="telError" class="invalid-feedback">
        電話番号を入力してください
    </div>
</div>

ブラウザ表示

8. ユーザー体験を向上させる配置の工夫

エラーメッセージの配置はユーザー体験に大きく影響します。ユーザー体験とは利用者がサービスを使用したときの満足度を意味します。入力欄の近くに表示することで修正作業が簡単になります。

またメッセージ内容は短く具体的にすることが重要です。長すぎる説明は読みづらくなります。例えば入力してくださいという表現よりメール形式で入力してくださいと書く方が分かりやすくなります。

さらに複数エラーがある場合は上から順番に修正できる配置にすると混乱を防げます。ユーザーが迷わないフォームは離脱率の低下にもつながり、検索評価にも良い影響を与えます。

まとめ

（振り返りのまとめ）

先生と生徒の振り返り会話

（振り返りのまとめ）

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでフォームを作ったのですが、エラーメッセージをどこに書けばいいのかわかりません」

先生

「Bootstrapには入力エラーや成功を表示する仕組みが用意されています。invalid feedbackやvalid feedbackを使うことで見やすいフォームを作れます。」

生徒

「エラーを表示する場所にルールはあるのですか」

先生

「配置にはおすすめの書き方があります。ユーザーが迷わないフォームを作るためにとても重要です。順番に解説していきましょう。」

1. Bootstrapフォームバリデーションとは何か

Bootstrapフォームバリデーションとは、入力フォームに正しく情報が入力されたか確認し、エラーや成功を画面に表示する仕組みです。バリデーションとは入力内容を確認する処理のことを意味します。例えばメールアドレスの入力欄に数字だけ入力した場合、正しくない内容として警告を表示します。

フォームは問い合わせページや会員登録画面などで必ず使われます。入力内容が正しくないとシステムに登録できず、ユーザーは混乱します。そのため入力エラーをわかりやすく表示することは使いやすさを高める重要なポイントです。

Bootstrapでは入力状態に応じてスタイルを自動で変更できます。入力エラーがある場合は赤色で表示され、入力が正しい場合は緑色で表示されます。この視覚的な変化により初心者でも状況をすぐに理解できます。

2. invalid feedbackとvalid feedbackの役割

invalid feedbackは入力エラー時に表示されるメッセージです。例えば必須項目を入力し忘れた場合に表示されます。一方valid feedbackは入力内容が正しい場合に表示されるメッセージです。

この二つを使い分けることでユーザーは現在の入力状況を理解できます。例えるなら答案用紙の丸やバツのような役割を持っています。丸がvalid feedbackで、バツがinvalid feedbackです。

Bootstrapでは特定のクラスを使うだけで簡単に表示できます。クラスとは見た目や動きを指定するための名前付き設定のことです。HTMLにクラスを書くことでスタイルが自動的に適用されます。


<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label class="form-label">名前</label>
        <input type="text" class="form-control" required>
        <div class="invalid-feedback">
            名前を入力してください
        </div>
        <div class="valid-feedback">
            正しく入力されています
        </div>
    </div>
    <button class="btn btn-primary">送信</button>
</form>

ブラウザ表示

3. エラーメッセージ配置の基本ルール

invalid feedbackとvalid feedbackは入力フォームの直後に配置するのが基本です。直後とは入力欄のすぐ下に書くことを意味します。この配置にすることでユーザーはどの入力欄に問題があるのか瞬時に理解できます。

もしメッセージを別の場所に表示すると、どの入力欄のエラーなのか分かりにくくなります。特にスマートフォンでは画面が小さいため、エラーの位置がずれると使いにくいフォームになります。

また入力欄と同じグループ内に配置することも大切です。グループとは入力欄とラベルやメッセージをまとめた箱のことです。このまとまりがあることで見やすさが向上します。


<div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control" required>
    <div class="invalid-feedback">
        正しいメール形式で入力してください
    </div>
</div>

ブラウザ表示

4. form group構造を使ったベストプラクティス

Bootstrapではフォームを整理するためにグループ構造を使用します。グループ構造とは関連する要素をまとめる設計方法です。これにより画面が整い読みやすくなります。

フォームグループの中にラベル入力欄エラーメッセージをまとめることで、ユーザーは自然な流れで入力できます。これは文章の段落と同じ考え方です。段落が整理されている文章は読みやすく理解しやすい特徴があります。

Bootstrapではmbというクラスを使うと上下の余白を簡単に設定できます。余白とは要素同士の間隔のことです。余白を適切に取ることで見やすいフォームになります。


<form>
    <div class="mb-3">
        <label class="form-label">パスワード</label>
        <input type="password" class="form-control" required minlength="6">
        <div class="invalid-feedback">
            六文字以上で入力してください
        </div>
    </div>
</form>

ブラウザ表示

5. JavaScriptを使ったバリデーション制御

BootstrapのバリデーションはJavaScriptと組み合わせることでより便利に使えます。JavaScriptとは画面の動きを制御するプログラム言語です。フォーム送信時に入力チェックを行いエラーメッセージを表示できます。

needs validationというクラスを使用すると、送信時に入力チェックを実行できます。またnovalidate属性を使うことでブラウザ標準のチェックを停止しBootstrapのスタイルを利用できます。


<script>
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
    .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()
</script>

ブラウザ表示

6. チェックボックスや選択フォームでの配置方法

入力欄だけでなくチェックボックスや選択リストでもエラーメッセージを表示できます。チェックボックスとは複数の選択肢から選ぶ入力形式です。選択リストは候補の中から一つ選択する入力方法です。

これらの場合は入力欄の直後ではなくチェックグループ全体の下にメッセージを表示すると見やすくなります。複数項目をまとめて説明できるためユーザーが理解しやすくなります。


<div class="form-check">
    <input class="form-check-input" type="checkbox" required>
    <label class="form-check-label">
        利用規約に同意する
    </label>
    <div class="invalid-feedback">
        同意が必要です
    </div>
</div>

ブラウザ表示

7. アクセシビリティを考えたエラーメッセージ設計

アクセシビリティとは誰でも利用しやすい設計のことです。視覚が弱い人や高齢者にも配慮したフォーム設計が求められます。色だけでエラーを判断するのではなく、文章でも説明することが大切です。

またaria属性を追加すると画面読み上げ機能に対応できます。読み上げ機能とは文字を音声で読み上げる支援機能です。この対応により多くの利用者が快適にフォームを使用できます。


<div class="mb-3">
    <label class="form-label">電話番号</label>
    <input type="tel" class="form-control" required aria-describedby="telError">
    <div id="telError" class="invalid-feedback">
        電話番号を入力してください
    </div>
</div>

ブラウザ表示