【JavaScript】セレクトボックス未選択を防ぐ方法｜2つの項目どちらも未選択ならエラーにする

フォームを作っているとよくあるのが、

• セレクトボックスを用意したけど未選択のまま送信される
• 「選択してください」のまま送られてしまう

という問題です。

特に、

「2つの選択肢のうちどちらかは選んでほしい」

というケースでは、少し工夫が必要になります。

この記事では、
2つのセレクトボックスが両方とも未選択だった場合にエラーにする方法を解説します。

よくあるフォームの構成

まずは一般的な例です。

<select id="sampleSelect1">
  <option value="default">選択してください</option>
  <option value="option1">パターンA</option>
  <option value="option2">パターンB</option>
</select>

<select id="sampleSelect2">
  <option value="default">選択してください</option>
  <option value="option1">パターンA</option>
  <option value="option2">パターンB</option>
</select>

この状態だと、ユーザーが何も選ばなくても送信できてしまいます。

実現したい動き

今回やりたいのはこれです。

• どちらも未選択 → エラー
• どちらか1つでも選択 → OK

JavaScriptでの実装

以下のコードを追加するだけでOKです。

<script>
document.addEventListener('DOMContentLoaded', function () {  const selectA = document.getElementById('sampleSelect1');
  const selectB = document.getElementById('sampleSelect2');  const form = selectA.closest('form');  form.addEventListener('submit', function (e) {    const valueA = selectA.value;
    const valueB = selectB.value;    // 両方とも未選択の場合
    if (valueA === 'default' && valueB === 'default') {
      e.preventDefault();
      alert('どちらか1つは選択してください');
      selectA.focus();
    }  });});
</script>

ポイント解説

① valueを統一する

<option value="default">選択してください</option>

ここが重要です。

表示テキストではなく、
valueで判定するのが正解です。

② formに対してsubmitイベントを設定

form.addEventListener('submit', function (e) {

これにより、

送信ボタンが押された瞬間にチェックできます。

③ 送信を止める

e.preventDefault();

これがないとエラー表示しても送信されてしまいます。

よくあるミス

テキストで判定してしまう

if (selectA.textContent === '選択してください')

→ NGです
理由：HTML構造によって取得値が変わるため

hiddenのselectをそのままチェック

もし片方のselectが非表示の場合は注意です。

display: none;

この場合でも値は取得されるので、
必要に応じて条件分岐を追加してください。

応用：非表示の時はチェックしない

const isVisible = selectB.offsetParent !== null;if (valueA === 'default' && (!isVisible || valueB === 'default')) {
  e.preventDefault();
  alert('選択してください');
}

まとめ

今回のポイントを整理すると：

• セレクトボックスは value で判定する
• submitイベントでチェックする
• preventDefaultで送信を止める
• 複数項目の組み合わせチェックも可能

最後に

このようなバリデーションは、

• 問い合わせフォーム
• 予約フォーム
• ECサイトのオプション選択

など、かなり多くの場面で使えます。

「入力ミスを減らす」＝「CVR改善」に直結するので、
細かいですがしっかり実装しておくのがおすすめです。