【JavaScript】簡単な入力チェックを行う方法

<form id="form">
  <label for="name">名前</label>
  <input type="text" id="name" required>

  <label for="email">メールアドレス</label>
  <input type="email" id="email" required>

  <button type="submit">送信</button>
  <div id="errors" role="alert"></div>
</form>

const form = document.getElementById("form");

form.addEventListener("submit", (event) => {
  if (!form.checkValidity()) {   // 1つでも不正なら
    event.preventDefault();
    form.reportValidity();       // 標準エラーを表示＋最初のエラー項目へ自動フォーカス
  }
});

const form = document.getElementById("form");
const errorBox = document.getElementById("errors");

form.addEventListener("submit", (event) => {
  const errors = [];
  const name = document.getElementById("name").value.trim();
  const email = document.getElementById("email").value.trim();

  if (!name) errors.push("名前を入力してください。");

  if (!email) {
    errors.push("メールアドレスを入力してください。");
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.push("有効なメールアドレスを入力してください。");
  }

  errorBox.textContent = ""; // 表示をリセット
  if (errors.length > 0) {
    event.preventDefault();   // 送信を止める
    errors.forEach((msg) => {
      const p = document.createElement("p");
      p.textContent = msg;    // textContentでXSSを防ぐ
      errorBox.appendChild(p);
    });
  }
});

const firstInvalid = form.querySelector(":invalid");
if (firstInvalid) {
  firstInvalid.focus();
}

const name = document.getElementById("name");
const nameError = document.getElementById("name-error");

name.addEventListener("blur", () => {
  nameError.textContent = name.value.trim() ? "" : "名前を入力してください。";
});

<input type="email" id="email" required
       aria-describedby="email-error" aria-invalid="false">
<span id="email-error" role="alert"></span>

const email = document.getElementById("email");
const emailError = document.getElementById("email-error");

function showEmailError(message) {
  emailError.textContent = message;
  email.setAttribute("aria-invalid", message ? "true" : "false");
}