「開始日」と「終了日」のバリデーション付きフォーム

「開始日」と「終了日」の入力欄を備えた日時選択フォームを作成し、それぞれの値の関係をJavaScriptでチェックする方法について丁寧に解説していきます！

こういった機能は、イベントの申し込みや予約フォームなど、実務の中でも頻出の要素です。初心者の方でも理解できるよう、基本から順に見ていきましょう。

できること：このフォームの機能概要

まずはHTML部分から見ていきます。

<input type="datetime-local" class="form-control" id="startDate" name="startDate" required>

この type="datetime-local" は、日付と時刻を同時に選べる入力欄です。

<form id="dateForm">
  開始日 → 入力欄  
  終了日 → 入力欄  
  [送信] ボタン
</form>
<div id="error" class="text-danger"></div>

エラーメッセージを出すための div#error も準備されています。

バリデーションとは、「入力内容がルールに従っているかどうかをチェックする処理」のことです。

dateForm.addEventListener('submit', function (e) {
  e.preventDefault(); // フォームの自動送信を止める
});

まずは送信ボタンが押されたときに処理を止めて、自分でチェックを行います。

const start = new Date(startDate.value);
const end = new Date(endDate.value);

input[type="datetime-local"] からは文字列が取得されますので、Date オブジェクトに変換する必要があります。

if (start > end) {
  error.textContent = '開始日は終了日より前でなければなりません。';
  return;
}

ここでは「開始日のほうが終了日より後」だった場合にエラーを表示する条件式を設定しています。

error.textContent = '開始日は終了日より前でなければなりません。';

これは「エラーをその場で表示する」非常にシンプルかつ実用的な方法です。

一方、成功時は：

alert('フォームが正常に送信されました。');

でユーザーに確認を促す作りになっています。

このフォームは実務でも応用しやすく、こんな発展形にもつながります。

このコードをマスターできたら、以下の内容にチャレンジするとさらに理解が深まります！