【JavaScript】changeとsubmitの違いとは？フォーム入力チェックの正しい使い分け

<label>都道府県：</label>
<select id="pref">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
</select>

<script>
  document.getElementById("pref").addEventListener("change", function () {
    alert("選択された都道府県：" + this.value);
  });
</script>

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">送信</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function (event) {
    const username = this.username.value.trim();
    if (username === "") {
      alert("ユーザー名を入力してください");
      event.preventDefault(); // 送信をキャンセル
    }
  });
</script>

<form id="signupForm">
  <label>年齢：<input type="number" id="age" required></label><br>
  <span id="ageMsg" style="color:red;"></span><br>
  <button type="submit">送信</button>
</form>

<script>
  const ageInput = document.getElementById("age");
  const ageMsg = document.getElementById("ageMsg");

  // 値変更時にリアルタイムメッセージ
  ageInput.addEventListener("change", function () {
    if (this.value < 18) {
      ageMsg.textContent = "18歳以上が必要です。";
    } else {
      ageMsg.textContent = "";
    }
  });

  // 送信時に最終チェック
  document.getElementById("signupForm").addEventListener("submit", function (e) {
    if (ageInput.value < 18) {
      alert("年齢制限により送信できません。");
      e.preventDefault();
    }
  });
</script>