Bootstrapフォーム検証の基本！初心者向けスターターテンプレートとエラーメッセージ配置ガイド
生徒
「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などのクラスを使って、サイズを調整しましょう。
