FORM VALIDATION

폼 유효성 검사 상태 기준

검증 함수가 true나 false를 반환하는 것만으로 폼 품질이 정해지지 않는다. 사용자가 아직 건드리지 않은 필드, 수정했지만 제출하지 않은 필드, 서버에서 거부된 값, 비동기 중복 확인을 다른 상태로 나누어 표시해야 한다.

01

초기 상태

value와 error를 비워두되 사용자가 보기 전 오류를 바로 노출할지 결정한다.

처음부터 빨간 화면이면 부담이 크다
02

입력 중 검증

onChange에서는 형식 힌트나 즉시 막아야 하는 값만 가볍게 확인한다.

무거운 검증은 입력 지연을 만든다
03

이탈 시 검증

onBlur에서 touched를 표시하고 필수값, 길이, 형식 오류를 보여준다.

건드린 필드만 오류를 보여주기 좋다
04

제출 검증

onSubmit에서 전체 필드를 다시 확인하고 pending, success, server error 상태를 분리한다.

서버 검증은 반드시 남아야 한다
05

오류 연결

입력과 오류 메시지를 aria-describedby로 연결해 보조기술도 읽을 수 있게 한다.

시각적 오류만으로는 부족하다
onChange
즉시 피드백 숫자 범위, 문자 제한처럼 빠르게 알릴 조건에 적합하다.
서버 요청은 debounce가 필요하다
onBlur
필드 완료 판단 사용자가 필드를 떠난 뒤 필수값과 형식을 보여준다.
touched 상태와 잘 맞는다
onSubmit
최종 계약 모든 필드와 서버 규칙을 다시 확인하고 제출을 막거나 진행한다.
클라이언트 검증을 신뢰하지 않는다
server
업무 규칙 중복 이메일, 권한, 재고처럼 서버만 아는 오류를 폼 상태로 되돌린다.
필드 오류와 전역 오류를 나눈다

폼 확인

오류 노출 처음 화면, 입력 중, blur 후, submit 후 오류 표시가 다르게 동작하는지 본다.
중복 제출 pending 동안 버튼 비활성화와 재시도 처리가 맞는지 확인한다.
접근성 오류 메시지가 해당 input과 연결되고 스크린리더에 읽히는지 확인한다.