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

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

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

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

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

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

入力フォーム作成

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

  <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要素を一つずつバリデーションチェックするように実装しています。

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

以下に3点ほどポイントを記載します。

ポイント① checkValidityメソッド

Bootstrapとは関係ありませんが、input要素のcheckValidityメソッドをコールすることで明示的にバリデーションチェックを実施することが出来ます。

checkValidityメソッドは、input要素を検証してエラーがなければtrue、エラーがあればfalseを戻り値として返してくれます。

今回の例では、メールアドレス入力欄のinput要素がtype=”email”、かつrequired属性を持っているので、

  • 入力欄に何も入力されていない
  • 入力された値がe-mail形式ではない

上記の場合にfalseを返してくれます。

ポイント② is-invalidクラスの付与

checkValidityメソッドでfalseが返ってきた場合、バリデーションエラーとして画面に表示するために対象のinput要素にis-invalidクラスを付与します。

Bootstrapでは、is-invalidクラスが付与された要素は、異常な入力値であることを示すために赤枠で表示されるようになります。

ポイント③ invalid-feedbackクラスの付与

さらに、バリデーションエラー時のメッセージ表示用の要素にinvalid-feedbackクラスを付与します。(今回の場合はresultクラスが付与されているp要素)

Bootstrapでは、invalid-feedbackクラスが付与された要素は、異常時のメッセージであることを示すために赤字でメッセージが表示されます。

今回の場合、checkValidityメソッドのチェック結果をvalidationMessageプロパティから取得してメッセージを表示していますが、独自にメッセージを表示しても構いません。

ちなみに、不正なメールアドレス形式を入力して送信ボタンをクリックした場合は以下のような表示になります。

まとめ

Bootstrapでは、is-invalidクラス・invalid-feedbackクラスを付与することで簡単にバリデーションエラーの見た目を整えることが出来ます。

せっかくBootstrapを使っているのであれば、赤く強調して見た目よく表示したいところですね。

コメント