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

生徒

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

先生

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

生徒

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

先生

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

1. Bootstrapのフォーム検証とは？

Bootstrap（ブートストラップ）では、フォームに入力された内容が正しいかどうかを自動でチェックし、エラーがあれば赤枠やメッセージで知らせてくれる「フォーム検証（バリデーション）」機能があります。これにより、ユーザーが間違った情報を入力したまま送信できないようにしたり、分かりやすく修正を促すことができます。

特別なJavaScriptを書く必要はなく、HTMLとCSSのクラスを使うだけで実現できるのが特徴です。

2. was-validatedクラスとは？

Bootstrapでは、フォームにwas-validatedというクラスをつけることで、検証結果の表示が有効になります。このクラスは、ユーザーがフォームを送信しようとしたタイミングで追加されるのが一般的です。

これにより、入力が正しいときは緑色、間違っているときは赤色の枠が表示され、視覚的に入力内容の正誤が分かるようになります。

3. 入力エラーを表示するHTML構造

フォームの各入力項目には、エラーメッセージを表示するための専用のHTMLタグを使います。具体的には、<div class="invalid-feedback">を使うことで、Bootstrapが自動でその部分にエラーメッセージを表示してくれるようになります。

また、正しく入力された場合にはvalid-feedbackクラスを使えば、「よくできました！」のようなメッセージを出すこともできます。

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

では、初心者でもすぐに使えるフォーム検証のスターターテンプレートを紹介します。メールアドレスの入力欄と送信ボタンだけのシンプルな例です。


<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="email" 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>

ブラウザ表示

5. invalid-feedbackとvalid-feedbackの配置場所

エラーメッセージの配置場所も大切です。invalid-feedbackはinputタグのすぐ後ろに書くようにします。これを間違えると、うまく表示されないことがあります。

これは、Bootstrapが「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はフォームの使いやすさにも力を入れているから、基礎を理解すればすぐ応用できますよ。」

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

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

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

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