<!-- web-practice/portfolio/contact.html -->
<div class="field">
  <label for="name">이름</label>
  <input type="text" id="name" name="name" autocomplete="name" required aria-describedby="name-error" />
  <p class="error" id="name-error" aria-live="polite"></p>
</div>

// web-practice/portfolio/js/main.js
const form = document.querySelector('.contact-form')
 
const messages = {
  name: {
    valueMissing: '이름을 입력해 주세요.',
  },
  email: {
    valueMissing: '이메일을 입력해 주세요.',
    typeMismatch: '올바른 이메일 형식이 아닙니다.',
  },
  message: {
    valueMissing: '메시지를 입력해 주세요.',
    tooShort: '메시지는 10자 이상 입력해 주세요.',
  },
  agree: {
    valueMissing: '개인정보 수집·이용에 동의해야 제출할 수 있습니다.',
  },
}
 
function validateField(field) {
  field.setCustomValidity('')
 
  const rules = messages[field.name]
  if (!rules) return
 
  const validity = field.validity
  let text = ''
 
  for (const [key, msg] of Object.entries(rules)) {
    if (validity[key]) {
      text = msg
      break
    }
  }
 
  field.setCustomValidity(text)
 
  const errorEl = document.getElementById(`${field.id}-error`)
  if (errorEl) {
    errorEl.textContent = text
  }
}
 
if (form) {
  const fields = form.querySelectorAll('input[name], textarea[name]')
 
  fields.forEach((field) => {
    field.addEventListener('input', () => validateField(field))
    field.addEventListener('blur', () => validateField(field))
  })
 
  form.addEventListener('submit', (event) => {
    fields.forEach((field) => validateField(field))
 
    if (!form.checkValidity()) {
      event.preventDefault()
      form.reportValidity()
    }
  })
}

/* web-practice/portfolio/css/styles.css */
.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  border-color: var(--color-accent);
}
 
.contact-form .error {
  color: var(--color-accent);
  font-size: var(--text-sm);
  min-height: 1.2em;
}