현대적인 폼 유효성 검증 기법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자(HTML/CSS 기반 폼 UX 개선)

난이도: 중급(기본 CSS 이해 필요)

핵심 요약

• :has() 선택자로 필수 입력 필드 자동 표시 (예: label::after에 * 추가)
• :focus:invalid로 입력 오류 시 실시간 스타일링 (예: border-color: #b91616)
• :has(*:invalid)로 제출 버튼 상태 변경 (예: background-color: #aaa)

섹션별 세부 요약

1. 필수 필드 자동 표시

• :has(label + *:required) 선택자 사용
• fieldset 컨테이너에 legend 대신 사용
• content: "*"로 라벨 뒤에 별표 삽입

1. 입력 오류 시 실시간 스타일링

• :focus:invalid로 입력 중 오류 시 강조
• email 필드 등 특정 형식 요구 시 동작
• :focus:valid로 유효 시 상태 표시

1. 제출 버튼 상태 변경

• form:has(*:invalid)로 유효하지 않은 필드 존재 시
• 버튼 배경색 #aaa로 비활성화 스타일 적용
• 실제 기능은 비활성화되지 않음

결론

CSS만으로 폼 유효성 검증 UX를 개선할 수 있으며, :has() 및 :focus:invalid 선택자 활용이 핵심. 실무에서는 Starter theme 예제를 참고하여 적용 가능.