Bootstrap5 フォームの検証

Bootstrap5 フォーム検証

この文章では、Bootstrap5 の組み込みクラスと JavaScript プラグインを使用して、クライアント側のフォーム検証を実装する方法について説明します。

1. 基本的なフォーム検証

HTML5 の検証属性 (例: required、pattern) を使用して、フォーム要素の基本的なフォーム検証を実装する方法について説明します。また、フォーム送信時にブラウザのデフォルトの検証メカニズムを利用してエラーメッセージを表示する方法についても説明します。

HTML5 の検証属性

HTML5 は、フォームの検証を簡素化する組み込みの属性を提供しています。これらの属性をフォーム要素に追加することで、ブラウザは自動的に値の検証を行い、エラーメッセージを表示することができます。

required: フィールドが必須であることを示します。
pattern: フィールドが入力されるべき正規表現を指定します。
min, max: 数値フィールドの最小値と最大値を指定します。
minlength, maxlength: テキストフィールドの最小文字数と最大文字数を指定します。

例:

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit">送信</button>
</form>

上記の例では、"名前" と "メールアドレス" の両方のフィールドに required 属性が設定されています。これにより、これらのフィールドが空白のままフォームを送信しようとすると、ブラウザはエラーメッセージを表示します。

2. カスタム検証スタイル

Bootstrap5 は、検証状態のスタイルをカスタマイズするための CSS クラスを提供しています。

.is-valid: 検証に合格したことを示します。
.is-invalid: 検証に失敗したことを示します。

これらのクラスを使用して、フォーム要素とエラーメッセージのスタイルを変更する方法について説明します。

例:

<form>
  <div class="mb-3">
    <label for="username" class="form-label">ユーザー名:</label>
    <input type="text" class="form-control" id="username" name="username" required>
    <div class="invalid-feedback">
      ユーザー名は必須入力です。
    </div>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

この例では、.form-control クラスを持つ入力フィールドに、検証に失敗した場合に .is-invalid クラスが自動的に適用されます。エラーメッセージは .invalid-feedback クラスを持つ div 要素内に表示され、検証に失敗したフィールドのすぐ下に配置されます。

3. JavaScript を使用した検証

より複雑なフォーム検証ロジックを実装するために、Bootstrap5 の JavaScript プラグインを使用する方法について説明します。

以下は、検証の実行、カスタム検証ルールの追加、エラーメッセージの表示と非表示、および JavaScript を使用した検証の手動トリガーを行う方法を示すコード例です。

例:

<form id="myForm">
  <div class="mb-3">
    <label for="password" class="form-label">パスワード:</label>
    <input type="password" class="form-control" id="password" name="password" required>
    <div class="invalid-feedback">
      パスワードは必須入力です。
    </div>
  </div>
  <div class="mb-3">
    <label for="confirmPassword" class="form-label">パスワードの確認:</label>
    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
    <div class="invalid-feedback">
      パスワードが一致しません。
    </div>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    event.stopPropagation();
    if (form.checkValidity() === false) {
      form.classList.add('was-validated');
    } else {
      // フォームを送信
    }
  });
</script>

この例では、フォームの送信時に JavaScript を使用してパスワードとパスワードの確認フィールドが一致することを確認しています。一致しない場合、エラーメッセージが表示され、フォームの送信は阻止されます。

4. ツールチップとポップアップ

検証エラーメッセージをよりユーザーフレンドリーな方法で表示するために、Bootstrap5 のツールチップ（Tooltip）とポップアップ（Popover）コンポーネントを使用する方法について説明します。カスタムエラーメッセージを表示するようにツールチップとポップアップを構成する方法を示すコード例を示します。

例:

<form>
  <div class="mb-3">
    <label for="email" class="form-label">メールアドレス:</label>
    <input type="email" class="form-control" id="email" name="email" required data-bs-toggle="popover" data-bs-content="有効なメールアドレスを入力してください。">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

<script>
  const emailInput = document.getElementById('email');
  const popover = new bootstrap.Popover(emailInput);
</script>

この例では、メールアドレスの入力フィールドに data-bs-toggle="popover" と data-bs-content="有効なメールアドレスを入力してください。" 属性を追加しています。これにより、ユーザーがフィールドにマウスオーバーすると、ポップアップでカスタムエラーメッセージが表示されます。

5. サーバーサイド検証

クライアント側検証の重要性を強調しますが、その限界についても説明します。データの整合性とセキュリティを確保するために、常にサーバー側でフォーム検証を行うことをお勧めします。