폼 유효성 검사: 입력 피드백과 제출 차단

필드 상태 모델링

controlled input, touched, dirty, error message를 분리해 입력 중 피드백과 제출 후 피드백이 섞이지 않게 합니다.

입력 제어

field validator는 오류 코드를 만들고, 화면은 aria-invalid와 안내 문구로 드러냅니다. 제출 버튼은 오류 맵과 pending 상태만 보고 잠깁니다.

schema 규칙

클라이언트에서 통과한 값이 서버에서 거절될 때 필드 오류로 돌아오는지 확인합니다. 전체 알림만 띄우면 사용자가 고칠 위치를 놓칩니다.

오류 복구

필드별 빈 값, 형식 오류, 서버 오류, 재입력 후 오류 해제를 테스트 이름으로 남기면 폼 정책이 코드 밖에서도 읽힙니다.

field tests

필드 상태

값, touched, dirty, error를 한 객체에서 읽는다 오류 문구가 렌더 조건을 직접 계산하지 않게 하면 입력 중 피드백과 제출 후 피드백을 따로 조절할 수 있습니다.

touched/error

제출 차단

submit handler는 오류 맵과 pending 상태를 먼저 본다 필수 필드가 비었거나 요청 중이면 버튼을 비활성화하고, 첫 오류 필드로 초점 이동을 준비합니다.

제출 통과 기준

서버 응답

서버 오류는 필드 오류와 전체 오류로 나눠 매핑한다 이메일 중복처럼 고칠 수 있는 오류는 필드 아래에, 장애처럼 사용자가 고칠 수 없는 오류는 폼 상단에 둡니다.

서버 규칙

정상 제출 모든 필드가 통과하면 오류 문구가 사라지고 제출 중 버튼이 잠긴 뒤 성공 안내로 이동합니다.

오류 복구 빈 필드와 형식 오류를 고치면 해당 필드의 aria-invalid와 안내 문구가 함께 해제됩니다.

접근성 단서 오류 문구 id와 aria-describedby 연결을 확인해 스크린리더가 고칠 위치를 읽을 수 있게 합니다.

질문: 필수값, 형식 오류, 서버 오류가 언제 보이고 언제 사라지는가
순서: 필드 상태 모델링 -> 검증 함수 연결 -> 제출 차단과 오류 복구 테스트
위험: 클라이언트 규칙과 서버 규칙이 다르면 사용자는 같은 값을 넣고도 서로 다른 오류를 보게 됩니다.