Bootstrapフォーム検証の基本！初心者向けスターターテンプレートとエラーメッセージ配置ガイド

フォーム検証スターター：was-validated・エラーメッセージ配置の型

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

生徒

「Bootstrapでフォームの入力チェックってどうやるんですか？」

先生

「Bootstrapでは『フォーム検証』という仕組みがあって、入力内容に問題があると自動で見た目に変化をつけたり、エラーメッセージを出したりできるんだよ。」

生徒

「なんか難しそうですけど、初心者でもできますか？」

先生

「もちろん！今日はフォーム検証スターターテンプレートと、エラーメッセージの配置方法について、初心者でも分かるように丁寧に解説していくよ。」

1. Bootstrapのフォーム検証（バリデーション）とは？

Webサイトのお問い合わせフォームなどで、未入力のまま送信ボタンを押したときに「入力してください」と赤文字で警告が出た経験はありませんか？これを「フォーム検証（バリデーション）」と呼びます。

世界中で使われているデザインフレームワーク「Bootstrap（ブートストラップ）」には、この検証機能を初心者でも簡単に実装できる仕組みが標準で備わっています。本来、入力チェックには複雑なプログラミングが必要ですが、Bootstrapなら特定のHTMLクラスを追加するだけで、「入力ミスがあるときは赤枠」「正しいときは緑枠」といった視覚的なフィードバックを瞬時にユーザーへ伝えることができます。

プログラミング未経験者でも、以下のシンプルなHTML構造を記述するだけで、プロのような使いやすい入力フォームが作成可能です。


<div class="p-3 border rounded bg-light">
    <form class="was-validated">
        <div class="mb-3">
            <label for="userName" class="form-label fw-bold">お名前（必須入力の例）</label>
            <input type="text" class="form-control" id="userName" placeholder="例：山田 太郎" required>
            <div class="invalid-feedback">
                お名前を入力してください。ここが赤く表示されるのが検証機能です。
            </div>
        </div>
        <button type="submit" class="btn btn-primary">送信テスト</button>
    </form>
</div>

ブラウザ表示

このように、特別なJavaScriptを一から書かなくても、HTML属性（requiredなど）とBootstrapの専用クラスを組み合わせるだけで、ユーザーの入力ミスを防ぎ、サイトの信頼性を高めることができるのが最大の特徴です。

2. was-validatedクラスとは？検証を起動するスイッチの役割

Bootstrapを使って「入力漏れがありますよ」とユーザーに伝えるためには、was-validatedという特別なクラスが欠かせません。このクラスは、フォームに対して「今からバリデーション（入力チェック）の結果を画面に反映させてください」と命令を出す、いわば実行スイッチのような役割を持っています。

プログラミング未経験の方でも分かりやすいイメージとしては、テストの「採点」です。白紙の答案（未入力のフォーム）に、先生が赤ペンを入れるタイミングが、このwas-validatedが追加された瞬間です。このクラスがフォーム（<form>タグ）に付与されると、Bootstrapの標準機能が働き、入力が正しい項目は「成功（緑色）」、不備がある項目は「エラー（赤色）」として瞬時に色分けされます。

ここがポイント！
通常、このクラスは最初からHTMLに書いておくのではなく、ユーザーが「送信ボタン」を押した瞬間にJavaScriptなどで後から追加するのが一般的です。これにより、入力中はいきなり赤くならず、送信しようとした時に初めてチェック結果が表示される親切な設計になります。

具体的な表示サンプル

以下のサンプルは、すでにwas-validatedクラスが適用された状態のフォームです。未入力のまま送信しようとした時に、ブラウザ上でどのように色が変化するかを確認してみましょう。


<div class="container mt-3">
    <form class="was-validated">
        <div class="mb-3">
            <label for="sampleInput" class="form-label">お名前（必須入力の例）</label>
            <input type="text" class="form-control" id="sampleInput" placeholder="名前を入力してください" required>
            <div class="valid-feedback">入力バッチリです！</div>
            <div class="invalid-feedback">お名前を入力してください。</div>
        </div>

        <div class="mb-3">
            <label for="sampleSelect" class="form-label">お住まいの地域</label>
            <select class="form-select" required>
                <option value="">選択してください</option>
                <option value="1">東京都</option>
                <option value="2">大阪府</option>
            </select>
            <div class="invalid-feedback">地域を選択してください。</div>
        </div>

        <button class="btn btn-primary" type="submit">送信する</button>
    </form>
</div>

ブラウザ表示

上の例では、required（必須）属性がついた入力欄が空のため、自動的に枠線が赤くなっています。このように、CSSを一行も書かずに「クラス名一つ」でプロのようなエラー表示が実装できるのがBootstrapの強みです。

3. 入力エラーを表示するHTML構造とBootstrapの仕組み

ユーザーがフォームに入力した際、「名前が未入力です」といったメッセージをリアルタイムで表示させるには、特定のHTML構造が必要です。Bootstrapでは、入力フォームのすぐ下に専用のメッセージエリアを配置するだけで、状況に応じた表示の切り替えが簡単に行えます。

エラーメッセージを表示する「invalid-feedback」

入力内容に不備がある場合に表示させたいメッセージには、<div class="invalid-feedback">を使用します。このクラスを指定した要素は、通常時は非表示ですが、入力項目にエラー（is-invalidクラスの付与）が発生したときだけ自動的に赤文字で表示される仕組みになっています。

成功メッセージを表示する「valid-feedback」

逆に、正しく入力されたことを知らせたい場合はvalid-feedbackクラスを使います。「入力OK！」や「利用可能なユーザー名です」といったポジティブなフィードバックを返すことで、ユーザーが安心して入力を進められる親切な設計（UXの向上）につながります。

ポイント：これらのメッセージを表示させるには、親要素（<div>など）にBootstrapのバリデーション用クラスが適用されている必要があります。まずは基本の形をコードで見てみましょう。


<div class="container mt-4">
    <form class="was-validated">
        <div class="mb-3">
            <label for="userName" class="form-label">お名前（必須）</label>
            <input type="text" class="form-control" id="userName" placeholder="山田 太郎" required>
            <div class="invalid-feedback">
                お名前を入力してください。
            </div>
            <div class="valid-feedback">
                バッチリです！
            </div>
        </div>
    </form>
</div>

ブラウザ表示

上記のサンプルでは、required属性（必須入力）がついた入力欄が空の状態だと、Bootstrapの機能によって自動的にinvalid-feedbackの内容が表示されます。このように、HTMLタグとクラスを適切に組み合わせることが、使いやすいフォーム作りの第一歩です。

4. フォーム検証スターターの基本テンプレート

プログラミング未経験の方でも、コピー＆ペーストするだけで今すぐ使える「フォーム検証（バリデーション）」の基本テンプレートを用意しました。このコードを導入するだけで、ユーザーがメールアドレスを入力し忘れたり、形式を間違えたりした際に、ブラウザが自動で警告を表示してくれるようになります。

今回は、世界的に人気のデザインフレームワーク「Bootstrap」を活用した、視覚的にわかりやすいバリデーションを実装します。以下のコードをHTMLファイルに貼り付けてみてください。難しい設定は不要で、requiredという属性を加えるだけで「必須入力」のチェックが機能し始めます。


<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="email" class="form-label">メールアドレス</label>
        <input type="email" class="form-control" id="email" placeholder="example@mail.com" required>
        <div class="invalid-feedback">
            正しいメールアドレスの形式で入力してください。
        </div>
        <div class="valid-feedback">
            バッチリです！
        </div>
    </div>
    <button class="btn btn-primary" type="submit">送信ボタンを押す</button>
</form>

<script>
    (() => {
        'use strict'
        // ページ内の「needs-validation」クラスを持つすべてのフォームを取得
        const forms = document.querySelectorAll('.needs-validation')

        // 送信ボタンが押された時の動作をループ処理で定義
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                // 入力内容がルール（requiredなど）に違反している場合
                if (!form.checkValidity()) {
                    event.preventDefault() // 送信を中止
                    event.stopPropagation() // 他のイベントへの波及を停止
                }
                // フォームに「検証済み」のクラスを追加して赤枠/緑枠を表示
                form.classList.add('was-validated')
            }, false)
        })
    })()
</script>

ブラウザ表示

このテンプレートのポイントは、JavaScriptが「送信ボタンをクリックした瞬間」に入力内容をチェックし、問題があれば送信をブロックしてくれる点にあります。また、was-validatedというクラスが動的に追加されることで、ユーザーには一目で「どこが間違っているか」が伝わる仕組みになっています。これがユーザー体験（UX）を向上させ、離脱率を防ぐWeb制作の第一歩となります。

5. invalid-feedbackとvalid-feedbackの配置場所（ルールと構造）

Bootstrapでフォームバリデーション（入力チェック）を実装する際、最も間違いやすいのがメッセージを表示させる「場所」です。エラーメッセージであるinvalid-feedbackや、成功メッセージのvalid-feedbackは、必ず対象となるinputタグやtextareaタグのすぐ後ろ（弟要素）に記述してください。

なぜこの場所でなければならないのか。それは、Bootstrapの仕組みに理由があります。ブラウザが「この入力はエラーだ」と判断した際、その直後にある要素を探して「表示・非表示」を切り替えるようプログラムされているからです。間に他のタグを挟んでしまうと、メッセージが見つからず、画面に表示されない原因になります。

プログラミングに慣れていない方向けに、正しい配置パターンのサンプルを用意しました。入力欄とメッセージが「セット」になっている点に注目して確認してみましょう。


<div class="container mt-4">
    <form class="was-validated">
        <div class="mb-3">
            <label for="userName" class="form-label">お名前</label>
            <input type="text" class="form-control" id="userName" placeholder="例：山田 太郎" required>
            <div class="invalid-feedback">
                お名前を入力してください。
            </div>
            <div class="valid-feedback">
                バッチリです！
            </div>
        </div>

        <button class="btn btn-primary" type="submit">送信する</button>
    </form>
</div>

ブラウザ表示

上記のコードでは、inputタグが「未入力（エラー）」の状態であれば赤いメッセージが、正しく入力されれば青いメッセージが自動的に表示されます。もしメッセージが出ない場合は、まず「inputタグのすぐ後ろに書けているか」を真っ先にチェックしてみてくださいね。

6. CSSを使ってメッセージをさらに見やすくする

Bootstrapの標準のままでも充分ですが、少しだけCSSで装飾を加えると、よりユーザーに優しいフォームになります。以下はメッセージの文字を大きくしたり、色を少し変えたりする例です。


<style>
  .invalid-feedback {
    font-size: 1rem;
    color: red;
  }
</style>

7. novalidateの意味と使い方

フォームタグにあるnovalidate属性は、「ブラウザが自動で行うチェックを無効にする」という意味です。これをつけることで、Bootstrapの検証だけに集中できます。

逆につけないと、ブラウザとBootstrapの検証が両方動いて、動作が重複してしまうことがあります。

8. 初心者にありがちな間違いとその対策

初心者の方でよくあるミスは、was-validatedをフォームではなくinputに付けてしまったり、エラーメッセージのクラス名を間違えることです。

invalid-feedback → 正しい
invalid-message → 誤り

小さなつづりの違いでも、フォーム検証が機能しなくなるので注意しましょう。

9. スマホでも見やすいフォーム検証デザイン

Bootstrapはレスポンシブ対応なので、スマートフォンやタブレットでも自動で見やすいフォームになります。ですが、特に小さな画面ではエラーメッセージが見切れてしまうこともあります。そんなときは、form-control-smなどのクラスを使って、サイズを調整しましょう。

まとめ

Bootstrapを使ったフォーム検証は、入力内容の正しさを視覚的にわかりやすく示すことができるため、初心者でも扱いやすく、実務でも広く使われている大切な技術です。特に、入力欄のエラー表示や、正しい入力を促すためのメッセージ配置など、ユーザー体験を向上させるために欠かせないポイントが多く含まれています。フォームの使いやすさは、サイト全体の印象に直結するため、丁寧に作り込みたい部分です。具体的には、was-validatedクラスを使ってフォーム送信時に検証状態を有効化したり、入力欄のすぐ後ろにinvalid-feedback、valid-feedbackを置いて、適切なエラーメッセージや成功メッセージを表示させる仕組みが重要になります。さらに、novalidate属性によってブラウザの自動検証を無効化し、Bootstrapの検証を優先させることで、見た目も動作も統一されたフォーム設計が可能になります。下記は、今回学んだ要素を整理したサンプルコードです。Bootstrapのフォーム検証の仕組みを復習するためにも、実際の構造を確認しておくと理解が深まります。メッセージ表示、検証クラス、エラー位置など、どのように組み合わせれば自然なフォーム検証が実現できるかを視覚的に理解できます。


<form class="needs-validation mt-4" novalidate>
  <div class="mb-3">
    <label for="userName" class="form-label">お名前</label>
    <input type="text" class="form-control" id="userName" required>
    <div class="invalid-feedback">
      お名前を入力してください。
    </div>
  </div>

  <div class="mb-3">
    <label for="userMail" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="userMail" required>
    <div class="invalid-feedback">
      有効なメールアドレスを入力してください。
    </div>
  </div>

  <button class="btn btn-primary" type="submit">送信する</button>
</form>

<script>
(() => {
  'use strict';
  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>

ブラウザ表示

このように、Bootstrapのフォーム検証はHTMLの構造とクラス指定だけで実現できるため、初心者でも安心して扱えます。特に、エラーメッセージや成功メッセージをどこに配置するかが重要で、入力欄の直後に置くことで自然にユーザーへ伝えるデザインになります。また、JavaScriptでフォーム送信時に検証を実行させることで、入力内容が正しいかどうかを確実にチェックできます。こうした動作を理解しておくと、メールフォーム・問い合わせフォーム・アカウント登録ページなど、さまざまな用途で応用することができます。さらに、CSSを使ってメッセージ部分をカスタマイズすれば、より見やすく、より親切なフォームに仕上げることも可能です。エラー文字の大きさや強調方法を調整したり、成功時のメッセージをユーザーにわかりやすく提示することで、安心感のある入力体験を提供できます。フォームはサイトの中で最も操作される部分のひとつであり、ここを丁寧に設計することはとても重要です。正しい検証の仕組みを理解し、実践的なフォーム作りに役立てていきましょう。

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

生徒「フォーム検証って難しそうだと思っていましたけど、クラスを付けるだけでかなり簡単にできるんですね！」

先生「そうなんです。Bootstrapはフォームの使いやすさにも力を入れているから、基礎を理解すればすぐ応用できますよ。」

生徒「エラーメッセージの配置場所が大事という理由もよく分かりました。位置が違うとうまく表示されないんですね。」

先生「その通りです。構造をしっかり理解すると、思いどおりの表示ができるようになりますよ。」

生徒「これならメールフォームとかユーザー登録ページにもすぐ使えそうです！」

先生「ぜひ応用してみてください。フォーム検証をマスターすると、より良いサイト設計ができるようになります。」

2026年最新スキルアップ・実践セミナー