input 유효성에 따라 스타일링하는 3가지 방법 (invalid, user-invalid, out-of-range)

1. 입력값이 유효한지 알려줘야지~

• 우리는 사이트를 방문할 때 여러가지 입력창을 마주하게 된다.
• 그리고 특정 입력창은 사용자에게 요구하는 입력 데이터 형식이 있다.
• 만약 사용자가 입력한 값이 형식에 맞지 않다면, 형식에 맞지 않은 값이라는 걸 알려주는 게 중요하다.

💡 그렇다면, 어떻게 해야 사용자에게 값이 유효하지 않은지 알려줄 수 있을까?

• 이번 시간에는 사용자가 유효하지 않은 값을 입력했을 때, 그리고 값이 허용 범위를 벗어났을 때, 스타일을 달리 적용하는 방법을 알아보았다.

2. 유효성에 따라 스타일링하는 3가지 방법

(1) :invalid, :valid, 값 유효성에 따라 실시간 스타일링

• :invalid는 사용자가 입력한 값이 유효하지 않을 때 스타일이 적용된다.
• :valid는 사용자가 입력한 값이 유효할 때 스타일이 적용된다.
• 값이 유효하지 않다는 기준은 (1) 값이 pattern에 어긋나거나, (2) required인데 값이 없는 경우처럼 유효성 검사에 실패했을 때이다.

input:invalid {
  border-color: red;    /* 값이 유효하지 않다면, border색을 red로 지정한다 */
}

input:valid {
  border-color: #b8d8d8; /* 값이 유효하다면, border색을 #b8d8d8로 지정한다 */
}

• 아래 예시는 :invalid, :valid로, 값 유효성 결과에 따라 스타일을 적용한 모습이다.

See the Pen invalid example 2 by KumJungMin (@kumjungmin) on CodePen.

(2) :xxx-range, 범위 내 값인지 따라 스타일링

• :out-of-range 는 입력값이 특정 범위를 벗어난 경우 스타일이 적용된다.
• :in-range 는 입력값이 특정 범위에 속한 경우 스타일이 적용된다.
• 단, :out-of-range, :in-range는 min 과 max 속성이 설정된 input에서만 쓸 수 있다.

<input type="number" min="1" max="3" />

input:out-of-range {
    background-color: red; /* 범위를 벗어난 경우, border색을 red로 지정한다 */
}

input:in-range {
    background-color: green; /* 범위에 속한 경우, border색을 green로 지정한다 */
}

• 아래 예시는 :out-of-range, :in-range로, 스타일을 달리 준 모습이다.

See the Pen out-of-range, in-range example by KumJungMin (@kumjungmin) on CodePen.

어? 그런데 input에 required 속성을 지정한 경우 값이 없으면 유효성 검사가 실패인데,
왜 :out-of-range스타일이 적용되지 않는 걸까?

• 그 이유는 비교할 값이 없기 때문이다!
• input이 required 상태이면, 입력값이 없는 경우 유효하지 않다고 간주한다.
• 하지만 :out-of-range, :in-range는 “입력값이 특정 범위를 벗어났는지”에 따라 스타일이 적용된다.
• 그래서 입력창에 값이 없으면 비교할 값이 없어, :out-of-range 스타일이 적용되지 않는다.

(3) :user-xxx, 입력한 값이 유효한지 따라 스타일링

• :user-invalid 는 사용자 상호작용 이후, 값이 유효하지 않을 때 스타일이 적용된다.
• :user-valid 는 사용자 상호작용 이후, 값이 유효할 때 스타일이 적용된다.
• 값이 유효하지 않다는 기준은 (1) 값이 pattern에 어긋나거나, (2) required인데 값이 없는 경우처럼 유효성 검사에 실패했을 때이다.

:user-invalid {
    border-color: red; /* 값이 유효하지 않다면, border색을 red로 지정한다 */
}

:user-valid {
    border-color: green; /* 값이 유효하다면, border색을 green로 지정한다 */
}

• 아래 예시는 :user-invalid로 값 유효성 결과에 따라 스타일을 적용한 모습이다.

See the Pen user-invalid example by KumJungMin (@kumjungmin) on CodePen.

💡 예시 코드를 보니, :invalid, :valid와 동작이 같은데 :user-invalid, :user-valid는 왜 필요한 걸까?

• :invalid와 :user-invalid의 가장 큰 차이점은 바로 “스타일 적용 시점”이다.
• :invalid, :valid는 사용자가 값을 입력할 때마다 즉시 스타일을 적용한다.
• 그에 반해 :user-invalid, :user-valid는 사용자가 값을 입력한 후 상호작용을 해야, 그 다음부터 즉시 적용된다.

• 아래 예시 코드를 통해, 그 차이점을 한 번 확인해보자 🙂

See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen.

2. 마치며…

• 이번 시간에는 잘못된 입력을 알려주는 3가지 CSS 선택자를 알아보았다.
• :invalid는 유효하지 않은 값을 가진 입력 필드에, :out-of-range는 값이 특정 범위를 벗어난 입력 필드에,
• :user-invalid는 사용자 상호작용 이후에 유효하지 않은 값을 가진 양식 요소에 스타일을 적용한다는 걸 알 수 있었다.
• 만약 유효성에 따라 스타일을 달리 주어야 한다면, JS보다는 CSS 선택자를 사용해 간단히 구현해보자 :)