폼 에러가 입력 전에 뜨는 문제, :user-invalid로 고치는 법
문의 페이지를 열자마자 필수 입력란이 벌써 빨간 테두리로 보이는 사이트, 한 번쯤 보셨을 겁니다.
원인은 대부분 CSS에서 :invalid를 바로 쓴 경우입니다. :user-invalid로 바꾸면 사용자가 필드를 건드린 뒤에만 에러 스타일이 붙습니다.
💡 왜 :invalid만 쓰면 어색할까요?
막 들어온 방문자는 아직 아무것도 입력하지 않았습니다. 빨간 테두리가 먼저 보이면 “내가 뭘 잘못했지?”라는 인상만 남깁니다. :user-invalid는 포커스를 잃었거나 전송을 시도한 뒤에야 맞물리므로, 검증은 그대로 두고 타이밍만 사람 기준으로 맞출 수 있습니다.
1. :invalid 대신 :user-invalid로 바꾸기
에러 테두리는 :user-invalid에 걸고, HTML의 required·type="email"·pattern은 그대로 둡니다. 검증 규칙은 브라우저가 계산하고, 보이는 타이밍만 조정합니다. 크롬·엣지 119+, 사파리 16.5+, 파이어폭스 88+에서 쓸 수 있습니다.
/* 비추천: 열자마자 빨간 테두리 */
input:invalid { border-color: #cc2b2b; }
/* 추천: 입력·이탈·전송 후에만 */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
border-color: #cc2b2b;
background: #fff5f5;
}
input:user-valid {
border-color: #2e7d32;
}2. 에러 문구도 같은 타이밍에 보이기
안내 문구도 같은 선택자로 묶습니다. 사용자가 필드를 떠난 뒤에야 나타나고, 값을 고치면 바로 사라집니다. 전송 버튼을 눌렀을 때도 브라우저는 상호작용으로 보므로 스타일이 적용됩니다.
<label for="email">이메일</label>
<input id="email" name="email"
type="email" required>
<p class="err">올바른 이메일을 입력해 주세요.</p>
<style>
.err { display: none; color: #cc2b2b; }
input:user-invalid + .err {
display: block;
}
</style>3. 같이 챙길 점
구형 브라우저가 남았다면 blur 때 클래스를 붙이는 방식을 폴백으로 두면 됩니다. 스크린 리더용 aria-invalid는 CSS만으로는 맞춰지지 않으니, 접근성까지 챙길 때는 blur·input에서 동기화 스크립트가 필요합니다. 스타일만 정리할 때는 CSS 교체만으로도 체감이 큽니다.
"에러는 틀렸을 때 보여 주면 됩니다. 들어오자마자 보여줄 필요는 없습니다."
나눔웹은 문의·신청 폼을 만들 때 검증 타이밍과 안내 문구까지 같이 맞춰,
방문자가 시작하기도 전에 위축되지 않게 손봅니다.
