폼 오류 검증

<form novalidate>
  <div id="summary" tabindex="-1" aria-labelledby="summary-title">
    <h2 id="summary-title">입력 내용을 확인해 주세요. 오류 1건</h2>
    <ul><li><a href="#email">이메일 형식이 올바르지 않습니다.</a></li></ul>
  </div>

  <label for="email">이메일 (필수)</label>
  <p id="email-hint">예: name@example.com</p>
  <input type="email" id="email" required
         aria-invalid="true" aria-describedby="email-hint email-err">
  <p id="email-err" class="error">오류: 이메일 형식이 올바르지 않습니다.</p>
</form>

<form id="signup" novalidate>
  <div id="summary" tabindex="-1" aria-labelledby="summary-title" hidden>
    <h2 id="summary-title">입력 내용을 확인해 주세요.</h2>
    <ul id="summary-list"></ul>
  </div>

  <label for="name">이름 (필수)</label>
  <input id="name" autocomplete="name" required aria-describedby="name-err">
  <p id="name-err" class="error"></p>

  <label for="email">이메일 (필수)</label>
  <p id="email-hint">예: name@example.com</p>
  <input type="email" id="email" autocomplete="email" required
         aria-describedby="email-hint email-err">
  <p id="email-err" class="error"></p>

  <button type="submit">가입하기</button>
  <p id="done" role="status"></p>
</form>

var form = document.getElementById('signup');
var summary = document.getElementById('summary');
var title = document.getElementById('summary-title');
var list = document.getElementById('summary-list');
var fields = [
  { input: document.getElementById('name'), label: '이름', obj: '이름을' },
  { input: document.getElementById('email'), label: '이메일', obj: '이메일을' }
];

function message(f) {
  var v = f.input.validity;               // 브라우저 검사 결과만 사용
  if (v.valueMissing) return f.obj + ' 입력해 주세요.';
  if (v.typeMismatch) return '이메일 형식이 올바르지 않습니다. 예: name@example.com';
  return '';
}

function check(f) {
  var msg = message(f);
  var err = document.getElementById(f.input.id + '-err');
  if (msg) f.input.setAttribute('aria-invalid', 'true');
  else f.input.removeAttribute('aria-invalid');
  err.textContent = msg;                  // 오류가 없으면 비워 둠
  return msg;
}

fields.forEach(function (f) {
  // 입력을 마치고 벗어날 때 검사 (키를 누를 때마다 검사하지 않음)
  f.input.addEventListener('blur', function () {
    if (f.input.value) check(f);
  });
  // 이미 오류인 칸은 고치는 즉시 오류를 지움
  f.input.addEventListener('input', function () {
    if (f.input.getAttribute('aria-invalid') === 'true' && !message(f)) check(f);
  });
});

form.addEventListener('submit', function (e) {
  var errors = fields.map(function (f) {
    return { id: f.input.id, msg: check(f) };
  }).filter(function (x) { return x.msg; });

  if (!errors.length) { summary.hidden = true; return; }   // 정상 제출

  e.preventDefault();
  title.textContent = '입력 내용을 확인해 주세요. 오류 ' + errors.length + '건';
  list.textContent = '';
  errors.forEach(function (er) {
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = '#' + er.id;
    a.textContent = er.msg;
    a.addEventListener('click', function (ev) {
      ev.preventDefault();
      document.getElementById(er.id).focus();
    });
    li.appendChild(a);
    list.appendChild(li);
  });
  summary.hidden = false;
  summary.focus();                        // 제출 실패를 바로 알림
});

<label for="birth">생년월일</label>
<input id="birth" aria-invalid="true" aria-errormessage="birth-err">
<p id="birth-err">날짜를 YYYY-MM-DD 형식으로 입력해 주세요.</p>