第 20 课：关联输入错误详情

<form id="lessonForm" novalidate>
  <label for="minutes">练习分钟数</label>
  <input id="minutes" name="minutes" type="number" min="1" required aria-describedby="minutes-help">
  <p id="minutes-help">请输入至少 1 分钟。</p>
  <p id="minutes-error" hidden>提交失败：练习时长必须至少为 1 分钟。</p>
  <button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#lessonForm');
const input = document.querySelector('#minutes');
const error = document.querySelector('#minutes-error');
form.addEventListener('submit', event => {
  if (!form.reportValidity()) {
    input.setAttribute('aria-invalid', 'true');
    input.setAttribute('aria-errormessage', 'minutes-error');
    error.hidden = false;
    event.preventDefault();
  }
});
input.addEventListener('input', () => {
  input.removeAttribute('aria-invalid');
  input.removeAttribute('aria-errormessage');
  error.hidden = true;
});
</script>