フォームの検証

<form id="signup" novalidate>
  <div class="form-summary" id="summary" role="alert" tabindex="-1" hidden></div>

  <div class="field">
    <label for="name">お名前<span>（必須）</span></label>
    <input type="text" id="name" name="name" required autocomplete="name"
           aria-describedby="name-error">
    <p id="name-error" class="error" role="alert"></p>
  </div>

  <div class="field">
    <label for="email">メールアドレス<span>（必須）</span></label>
    <input type="email" id="email" name="email" required autocomplete="email"
           aria-describedby="email-help email-error">
    <p id="email-help" class="help">例: name@example.com</p>
    <p id="email-error" class="error" role="alert"></p>
  </div>

  <p><button type="submit" class="button">送信する</button></p>
</form>

<style>
#signup { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); justify-items: start; }
.field input { font: inherit; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); inline-size: min(100%, 22rem); }
.field .help { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.field .error { margin: 0; font-size: var(--text-sm); color: var(--color-danger); }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
.form-summary { padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-danger); color: var(--color-danger); }
.form-summary p { margin: 0; font-weight: 700; }
.form-summary ul { margin: var(--space-2) 0 0; padding-inline-start: 1.2em; }
</style>

<script>
var form = document.getElementById("signup");
var summary = document.getElementById("summary");
var fields = [
  { input: document.getElementById("name"),
    error: document.getElementById("name-error"),
    check: function (v) { return v ? "" : "お名前が入力されていません。"; } },
  { input: document.getElementById("email"),
    error: document.getElementById("email-error"),
    check: function (v) {
      if (!v) return "メールアドレスが入力されていません。";
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
        ? "" : "メールアドレスの形式をご確認ください。例: name@example.com";
    } }
];
function validate(f) {
  var message = f.check(f.input.value.trim());
  f.error.textContent = message;              // 枠は先に置いてあり、中身だけ差し替える
  if (message) f.input.setAttribute("aria-invalid", "true");
  else f.input.removeAttribute("aria-invalid");
  return message;
}
fields.forEach(function (f) {
  f.input.addEventListener("blur", function () {   // 初回は、書き終えてから判定する
    validate(f);
    f.input.dataset.touched = "1";
  });
  f.input.addEventListener("input", function () {  // 2回目以降は、直った瞬間に消す
    if (f.input.dataset.touched) validate(f);
  });
});
form.addEventListener("submit", function (event) {
  var bad = fields.filter(function (f) { return validate(f) !== ""; });
  if (bad.length === 0) { summary.hidden = true; return; }   // 通れば送信される
  event.preventDefault();
  while (summary.firstChild) summary.removeChild(summary.firstChild);
  var head = document.createElement("p");
  head.textContent = "入力に " + bad.length + " 件の誤りがあります";
  summary.appendChild(head);
  var list = document.createElement("ul");
  bad.forEach(function (f) {
    var item = document.createElement("li");
    var link = document.createElement("a");
    link.href = "#" + f.input.id;
    link.textContent = f.error.textContent;
    link.addEventListener("click", function (e) { e.preventDefault(); f.input.focus(); });
    item.appendChild(link);
    list.appendChild(item);
  });
  summary.appendChild(list);
  summary.hidden = false;
  summary.focus();                             // 誤りの一覧へ焦点を移す
});
</script>