폼 심화: 검증·제약 API·상태 관리

<form id="signup-form" novalidate>
  <label for="email">이메일</label>
  <input type="email" id="email" name="email" required />

  <label for="age">나이 (18~99)</label>
  <input type="number" id="age" name="age" min="18" max="99" required />

  <button type="submit">가입</button>
</form>

const form = document.getElementById('signup-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  // 폼 전체 유효성 검사: checkValidity()는 invalid 이벤트를 발생시키되 UI는 표시하지 않음
  if (!form.checkValidity()) {
    // reportValidity()는 첫 번째 유효하지 않은 필드에 포커스 + 브라우저 툴팁 표시
    form.reportValidity();
    return;
  }

  console.log('제출 완료');
});

// 개별 필드의 invalid 이벤트를 가로채 커스텀 UI 적용
form.querySelectorAll('input').forEach((input) => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault(); // 브라우저 기본 툴팁 억제
    input.closest('label')?.classList.add('field-error');
  });
});

// blur 이벤트로 "touched" 상태를 추적
document.querySelectorAll('input').forEach((input) => {
  input.addEventListener('blur', () => input.classList.add('touched'), { once: false });
});

const password = document.getElementById('password');
const confirm = document.getElementById('confirm-password');

confirm.addEventListener('input', () => {
  if (confirm.value !== password.value) {
    confirm.setCustomValidity('비밀번호가 일치하지 않습니다.');
  } else {
    confirm.setCustomValidity(''); // ✅ 오류 해제
  }
});

function getErrorMessage(input) {
  const v = input.validity;

  if (v.valueMissing) return `${input.labels[0]?.textContent} 항목은 필수입니다.`;
  if (v.typeMismatch) return '올바른 형식으로 입력해 주세요.';
  if (v.tooShort) return `최소 ${input.minLength}자 이상 입력해야 합니다.`;
  if (v.tooLong) return `최대 ${input.maxLength}자까지 입력할 수 있습니다.`;
  if (v.rangeUnderflow) return `${input.min} 이상의 값을 입력해 주세요.`;
  if (v.rangeOverflow) return `${input.max} 이하의 값을 입력해 주세요.`;
  if (v.patternMismatch) return input.title || '입력 형식이 올바르지 않습니다.';
  if (v.customError) return input.validationMessage;
  return '';
}

const usernameInput = document.getElementById('username');

usernameInput.addEventListener('blur', async () => {
  usernameInput.setCustomValidity(''); // 이전 오류 초기화

  const { taken } = await fetch(`/api/check-username?q=${usernameInput.value}`)
    .then((r) => r.json());

  if (taken) {
    usernameInput.setCustomValidity('이미 사용 중인 아이디입니다.');
    usernameInput.reportValidity(); // 즉시 브라우저 툴팁 표시
  }
});

const form = document.getElementById('upload-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // HTMLFormElement를 직접 생성자에 전달하면 모든 필드를 자동 수집
  const fd = new FormData(form);

  // 필드 추가·수정·삭제
  fd.append('source', 'web');       // 값 추가
  fd.set('username', 'alice');      // 값 덮어쓰기
  fd.delete('honeypot');            // 필드 제거

  // 수집된 데이터 순회
  for (const [name, value] of fd.entries()) {
    console.log(name, value);
  }

  await fetch('/api/submit', { method: 'POST', body: fd });
  // Content-Type은 자동으로 multipart/form-data로 설정됨
});

// FormData → 일반 객체 → JSON 변환
const fd = new FormData(form);
const payload = Object.fromEntries(fd.entries());
// ⚠️ 동일 name의 multiple 필드(체크박스 등)는 마지막 값만 남음

// ✅ 동일 name 다중 값 처리
const payloadMulti = {};
for (const [key, value] of fd.entries()) {
  if (payloadMulti[key] !== undefined) {
    payloadMulti[key] = [].concat(payloadMulti[key], value);
  } else {
    payloadMulti[key] = value;
  }
}

await fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payloadMulti),
});

form.addEventListener('formdata', (e) => {
  e.formData.append('_csrf', getCsrfToken());
});

<form action="/articles" method="POST" id="article-form">
  <input type="text" name="title" required />
  <textarea name="body" required></textarea>

  <!-- 기본 제출: /articles로 POST, 검증 수행 -->
  <button type="submit">발행</button>

  <!-- formaction으로 다른 엔드포인트로 제출 -->
  <button type="submit" formaction="/articles/draft" formmethod="POST">
    임시 저장
  </button>

  <!-- formnovalidate: 검증 없이 제출 (초안 저장, 삭제 등에 유용) -->
  <button type="submit" formaction="/articles/draft" formnovalidate>
    검증 없이 임시 저장
  </button>

  <!-- formmethod="dialog": <dialog> 안에서 폼을 닫을 때 사용 (후술) -->
</form>

<button type="submit" name="_action" value="publish">발행</button>
<button type="submit" name="_action" value="draft">임시 저장</button>

// 서버 사이드(Node.js 예시)에서 구분
const action = formData.get('_action'); // 'publish' | 'draft'

<form autocomplete="on">
  <!-- 배송 주소 섹션 — 'shipping' 섹션 토큰 -->
  <input autocomplete="shipping name" name="ship-name" />
  <input autocomplete="shipping street-address" name="ship-street" />
  <input autocomplete="shipping postal-code" name="ship-zip" />

  <!-- 청구 주소 섹션 -->
  <input autocomplete="billing name" name="bill-name" />

  <!-- 결제 정보 -->
  <input autocomplete="cc-number" name="card-number" inputmode="numeric" />
  <input autocomplete="cc-exp" name="card-expiry" />
  <input autocomplete="cc-csc" name="card-csc" />

  <!-- 계정 정보 -->
  <input type="email" autocomplete="email" name="email" />
  <input type="password" autocomplete="current-password" name="password" />
  <input type="password" autocomplete="new-password" name="new-password" />

  <!-- OTP -->
  <input type="text" autocomplete="one-time-code" inputmode="numeric" />
</form>

<!-- ❌ 로그인 폼에 new-password를 잘못 사용 — 비밀번호 관리자가 새 자격증명으로 저장 시도 -->
<input type="password" autocomplete="new-password" name="password" />

<!-- ✅ 로그인 폼 -->
<input type="password" autocomplete="current-password" name="password" />

<!-- ✅ 회원가입/비밀번호 변경 폼 -->
<input type="password" autocomplete="new-password" name="new-password" />

<form id="custom-form" novalidate>
  <div class="field">
    <label for="email">이메일 <span aria-hidden="true">*</span></label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-describedby="email-error"
    />
    <span id="email-error" class="error-msg" role="alert" aria-live="polite"></span>
  </div>

  <button type="submit">제출</button>
</form>

const form = document.getElementById('custom-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let firstInvalid = null;

  form.querySelectorAll('input, select, textarea').forEach((field) => {
    const errorEl = document.getElementById(`${field.id}-error`);
    if (!field.validity.valid) {
      const msg = getErrorMessage(field); // 앞서 정의한 함수 재사용
      if (errorEl) errorEl.textContent = msg;
      field.setAttribute('aria-invalid', 'true');
      firstInvalid = firstInvalid ?? field;
    } else {
      if (errorEl) errorEl.textContent = '';
      field.removeAttribute('aria-invalid');
    }
  });

  if (firstInvalid) {
    firstInvalid.focus(); // 스크린 리더 사용자에게 포커스 이동
    return;
  }

  // 제출 로직
});

<dialog id="confirm-dialog">
  <form method="dialog">
    <p>정말로 삭제하시겠습니까?</p>
    <menu>
      <!-- value가 dialog.returnValue에 저장됨 -->
      <button type="submit" value="cancel">취소</button>
      <button type="submit" value="confirm">삭제</button>
    </menu>
  </form>
</dialog>

<button id="delete-btn">삭제</button>

const dialog = document.getElementById('confirm-dialog');
const deleteBtn = document.getElementById('delete-btn');

deleteBtn.addEventListener('click', () => {
  dialog.showModal(); // 모달로 열기
});

dialog.addEventListener('close', () => {
  if (dialog.returnValue === 'confirm') {
    console.log('삭제 확인됨');
    // 실제 삭제 API 호출
  }
});

<dialog id="edit-dialog">
  <form action="/api/items" method="POST">
    <input type="text" name="name" required />

    <!-- ✅ 취소 버튼: formmethod="dialog"로 폼 제출 없이 다이얼로그만 닫음.
         formnovalidate가 없으면 비어 있는 required 입력 때문에 제약 검증이
         실패하여 다이얼로그가 닫히지 않으므로, 반드시 함께 지정해야 함 -->
    <button type="submit" formmethod="dialog" formnovalidate value="cancel">취소</button>

    <!-- 실제 서버 제출 -->
    <button type="submit" value="save">저장</button>
  </form>
</dialog>

<!-- ✅ JS 없이도 서버에 제출되는 기본 구조 -->
<form action="/subscribe" method="POST">
  <input type="email" name="email" required autocomplete="email" />
  <button type="submit">구독</button>
</form>

// JS가 로드된 경우 AJAX로 향상
const form = document.querySelector('form');

if (form) {
  // 화살표 함수에는 arguments 객체가 없고, 엄격 모드/ES 모듈에서는
  // arguments.callee 사용이 금지되므로, 리스너를 명명 함수로 분리해
  // removeEventListener에 동일한 참조를 넘긴다.
  async function onSubmit(e) {
    e.preventDefault(); // 기본 동작(페이지 이동)을 막고 AJAX로 처리

    const fd = new FormData(form);
    try {
      const res = await fetch(form.action, { method: form.method, body: fd });
      if (res.ok) {
        showSuccessMessage(); // 커스텀 성공 UI
      }
    } catch {
      // 실패 시 기본 폼 제출로 폴백
      form.removeEventListener('submit', onSubmit);
      form.submit();
    }
  }

  form.addEventListener('submit', onSubmit);
}