React · Validation

폼 유효성 검사를 사용자 수정 흐름으로 만들기

유효성 검사는 틀린 값을 막는 벽이 아니라, 사용자가 어떤 필드를 어떻게 고치면 되는지 전달하는 수정 흐름이어야 한다.

01

규칙 분류

즉시 확인 가능한 규칙과 서버에 물어봐야 하는 규칙을 나눈다.

02

시점 결정

change, blur, submit 중 언제 오류를 보여줄지 필드 성격에 맞춘다.

03

메시지 연결

오류 메시지를 필드와 aria 속성으로 연결해 수정 위치를 분명히 한다.

04

서버 오류 통합

API에서 돌아온 validation 오류를 같은 오류 모델에 넣어 다시 표시한다.

required
비어 있음 공백 trim과 0, false 값을 구분
필드 타입별 의미 확인
format
형식 email, URL, 전화번호 등 사용자가 이해할 메시지
과도한 정규식 한계
relation
교차 필드 비밀번호 확인, 시작일과 종료일
관련 필드 변경 시 재검증
focus
오류 이동 제출 실패 시 첫 오류 필드로 안내
긴 폼에서 중요

오류 문구 · 표시 시점 · 서버 통합 점검

오류 문구 개발자 용어가 아니라 수정 행동을 알려준다.
표시 시점 사용자가 입력하기 전부터 빨간 오류로 압박하지 않는다.
서버 통합 중복 이메일 같은 서버 오류가 필드에 매핑된다.
보조기술 오류 메시지가 스크린 리더에 연결된다.