CSS 가상 선택자로 폼 밸리데이션 표시하기 — :invalid 대신 :user-invalid

HTML, JS 내이티브 밸리데이션은 15년 전쯤엔 아예 지원되지 않았습니다. 지금은 사용할 법한 수준으로 올라왔습니다. 단, 에러 메시지를 명확히 표시해 주려면 별도로 신경을 써 줘야 하는데요. 이 때 쓸만한 것이 :user-invalid 가상 선택자입니다.

`:invalid`

:invalid는 CSS 가상 선택자입니다. 뒤이어 설명할 :user-invalid보다 먼저 나온 것인데요. 차이를 설명하기 위해 먼저 소개합니다.

:invalid 가상선택자는 form, fieldset, input, select, textarea의 밸리데이션 조건을 충족하지 못하는 경우 적용됩니다.

예컨대 <input required> 필드에서 아무것도 입력하지 않으면 :invalid 가상 선택자가 적용됩니다. 아래 예제처럼요.

문제는 입력도 하기 전에 양식이 온통 빨간색이 된다는 것인데요. 그래서 실제로 사용하려면 상당히 복잡했을 것으로 생각됩니다_{(저는 실전에 적용해 본 적이 없습니다)}.

때문에 대안이 나왔습니다. :user-invalid 가상 선택자입니다. 이 가상선택자는 사용자가 폼 요소와 상호작용한 뒤, 혹은 폼을 제출하려 했을 때 폼 요소의 밸리데이션을 체크하고 상태를 결정합니다.

즉, 처음엔 빨간 줄이 가지 않은 정상적 폼 상태라는 거죠.

위의 폼은 가입하기 버튼을 누르거나 input에서 입력을 한 뒤 커서를 빼내야 밸리데이션이 체크됩니다.

또한 한 번 틀린 다음에는 입력을 할 때 입력중에 밸리데이션을 체크해 올바른 상태가 되면 에러 메시지가 없어집니다.

에러 메시지를 표시하는 데는 CSS 형제 선택자 +를 사용했습니다. 아래처럼요.

.error {
  color: red;
  display: none;
}

:user-invalid + .error {
  display: block;
}

:user-invalid와 짝을 이루는 것이 :user-valid 선택자입니다. 사용자가 상호작용을 한 뒤, 혹은 폼을 제출하려고 했을 때 체크해서 적용됩니다.

위 예제를 보면 검증을 통과했다는 의미로 필드 뒤에 ✓ 표시를 해 주는 것을 볼 수 있습니다. 형제 선택자 ~를 이용해서 한 것이죠.

.valid {
  color: green;
  display: none;
}

:user-valid ~ .valid {
  display: inline-block;
}

밸리데이션 조건이 복잡한 경우엔 JS를 사용해 상태를 제어할 수 있습니다. 예컨대 조건에 따라 밸리데이션 로직이 달라지는 경우가 그렇습니다.

아래 예제는 국가별로 우편번호 규칙을 검사하는 폼입니다.

필드에 setCustomValidity() 메서드를 사용해서 에러 메시지를 세팅합니다. 에러 메시지가 빈 문자열이면 통과한 것이죠.

:user-invalid와 :user-valid 가상 선택자 덕분에 HTML 내이티브 밸리데이션을 사용하면서도 에러 메시지를 명확히 표현해 줄 수 있게 됐습니다.

실전에서 사용해 봐야겠습니다.