Bootstrapを使ってテキストボックスのバリデーションエラーを表現する

Bootstrapを使って入力フォームを作ることはよくあります。

送信ボタンをクリックしたらバリデーションチェック。そして、そのエラー内容を画面に表示するといったこともよくあると思います。

標準的なバリデーションエラーだと以下のように表示されます。

が、入力エラーがある項目は赤く表示したいケースもあると思います。

そういった時にBootstrapのクラスを使ってどのようにエラー内容を表示するのか、その一例をご紹介します。

トピック

入力フォーム作成
JavaScriptでバリデーションチェック
まとめ

入力フォーム作成

まずは簡単な入力フォームを作成します。

  <form id="submitForm">
    <div class="form-group">
      <label for="emailBox">メールアドレス</label>
      <input id="emailBox" class="form-control col-6" type="email" required>
      <p class="result"></p>
    </div>
    <button id="btn" type="button">送信</button>
  </form>

JavaScriptでバリデーションチェック

次に、送信ボタンをクリックした時のバリデーションチェックをJavaScriptで実装します。

$(function() {

  // 送信ボタンクリックイベント
  $('#btn').on('click', () => {

    // Form内のinput要素を全てチェック
    $('#submitForm input').each((_, e) => {
      // メッセージ表示用の要素を予め取得
      let resultFeild = $(e).next('p');

      // バリデーション実施
      if (!e.checkValidity()) {
        // エラー用の見た目に変える
        $(e).addClass('is-invalid');
        resultFeild.addClass('invalid-feedback');
        resultFeild.text(e.validationMessage);
      } else {
        // 元の見た目に戻す
        $(e).removeClass('is-invalid');
        resultFeild.removeClass('invalid-feedback');
        resultFeild.text('');
      }
    });
  });

})

上の例では、送信ボタンのクリックイベントでForm内のinput要素を一つずつバリデーションチェックするように実装しています。

バリデーションチェックの結果、エラーとなった場合は赤く強調してエラーメッセージが表示されるようになります。