【JavaScript】select要素のリアルタイムバリデーション

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー JavaScript

JavaScript でフォームのリアルタイムバリデーションを実装する機会があったのでメモ。

【JavaScript】select要素のリアルタイムバリデーション

ということでさっそくですが、要件としては

  • 送信ボタンを押した際に、HTML の select要素を未選択の場合にアラートメッセージを表示させたい
  • select要素を選択したらアラートメッセージを消したい

です。

【JavaScript】select要素のリアルタイムバリデーションのサンプルコード

まずはコードから↓

See the Pen Select Realtime Validation by nkmr (@nkmr_whoo) on CodePen.

まず、順番としては

  • 何も選択しないまま送信ボタンを押すとエラーメッセージが表示される
  • セレクトボックスで『サンプル 1』『サンプル 2』『サンプル 3』を選択するとエラーメッセージが消える
  • セレクトボックスで『選択してください』を選択すると再度エラーメッセージが表示されます

解説

前提として getElementById などの要素取得に関しては割愛させていただきます。

まず、予め取得しておいた送信ボタン (submit) のクリックイベントが発生した際に、if 文の条件分岐で

  • select 要素のインデックス番号『0』が選択されている場合

を条件にします↓

if(selectBox.options[0].selected === true)

『options』『selected』に関しては以下をご参照ください↓

HTMLSelectElement.options – Web API | MDN
HTMLSelectElement.options は読み取り専用のプロパティで、HTMLOptionsCollection で <select> 要素に含まれる <option> 要素を返します。
developer.mozilla.org
JavaScriptで選択フォームの値をセットする方法
lab.syncer.jp

要は、

  • 送信ボタンを押した際に、optionsの 0 番目（今回のケースだとインデックス番号の 0 は『選択してください』になります）が選択されていたら

を条件とし、もしそうであれば（true）、のちに続くinnerHTMLでエラー文が表示されるアラートエリアにテキストを挿入します。

そうでなければ（else）、テキストを削除する、といった流れです。

if(selectBox.options[0].selected === true) {
    alertAreaSelect.innerHTML = "選択は必須です";
    } else {
    alertAreaSelect.innerHTML = "";
  }

次にリアルタイムのエラー文の表示・非表示ですが、次はイベントハンドラを『change』に設定し、select 要素が変更されたら発火するようにします。

selectBox.addEventListener('change', () =>

あとは先のコード内容とほとんど同じで、if 文の条件分岐を

  • select 要素を変更した際に、optionsの 0 番目が選択されていなかったら

を条件とします。（false）

つまり、select 要素を変更したにもかかわらず『 0 番目が選択されていない』ということは、『 0 番目以外が選択されている』という意味になります。

if(selectBox.options[0].selected === false)

select 要素を変更するたびにイベントは発火するのでリアルタイムでエラー文が表示・非表示され、かつ 0 番目が選択された際にはエラー文が表示されるようになります。

TIPS UI フォーム関係