정의 및 사용 방법

:valid 가상 클래스 선택자는
제약 조건에 대한 브라우저의 유효성 검사를 충족하는 폼 관련 요소를 선택합니다.

브라우저는 폼 제출에 필요한 폼 컨트롤 요소의 유효성 검증(validation)을 합니다.

이 검증 과정에서는 해당 요소가 폼 제출에 필요한 필수 컨트롤 요소인지, 사용자가 반드시 값을 입력하거나 선택해야 하는지, 그리고 입력값에 대한 제약 조건이 설정되어 있는지를 확인합니다. 이러한 제약 조건은 required 같은 HTML 속성으로 지정하거나, <input type="email">처럼 이메일 형식의 값을 요구하는 등 특정 형식의 입력을 요구하는 방식으로 설정할 수 있습니다.

:valid는 이처럼 제약 조건을 가지면서 유효성 검사를 충족하거나, 제약 조건이 없어서 당연히 유효성 검사를 충족한 폼 관련 요소를 선택합니다.

:valid를 활용하면 제약 조건에 대한 브라우저의 유효성 검사를 충족하는 요소라는 것을 사용자에게 시각적으로 쉽게 표현할 수 있습니다.

기본 예제를 통해 살펴보겠습니다.

기본 예제

다음은 사용자가 이미 입력한 정보를 확인하는 페이지에서, 이메일 형식을 올바로 입력한 상태의 요소를 :valid로 시각적으로 표현한 예제입니다. 이름 입력은 필수(HTML의 required 속성으로 지정됨)이지만 입력하지 않아 유효성 검사를 충족하지 못했습니다.

CSS 
input:valid {
    border: 2px solid green;
    background-color: beige;
}
HTML 
<form>
    <fieldset>
        <legend>사용자 정보 입력 확인</legend>
        <p>
            <label for="username">이름(필수)</label>
            <input id="username" type="text" required> <!-- 필수 입력 -->
        </p>
        <p>
            <label for="useremail">이메일</label>
            <!-- 이메일 형식을 올바로 입력한 상태의 요소: 유효성 검사를 충족 함-->
            <input id="useremail" type="email" value="account@exmaple.com">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 이메일 형식을 올바르지 않게 고쳐보세요.
올바른 이메일 주소(account@exmaple.com)를 account@@@@example.com처럼 잘못된 형식으로 수정하면, 이메일 입력 필드의 스타일이 바뀌고 유효성 검사를 충족하지 못할 것입니다. 또한 필수 입력 값인 이름에 글자를 입력해 보세요. 유효성 검사를 충족해서 스타일이 바뀔겁니다.

구문

CSS 
:valid {
    /* ... */
}

선택 가능한 요소

:valid 가상 클래스는 다음의 범주에 해당하는 요소를 선택할 수 있습니다.

  • 제약 조건 유효성 검사(constraint validation) 대상이지만 제약 조건을 충족하는 컨트롤 요소
  • 제약 조건 유효성 검사(constraint validation)을 적용할 수 있이나 제약 조건이 없어서 당연히 유효성 검사를 충족한 컨트롤 요소
  • 제약 조건 유효성 검사 대상이지만 제약 조건을 충족하지 않는 컨트롤 요소를 포함하지 않은 <form> 요소
  • 제약 조건 유효성 검사 대상이지만 제약 조건을 충족하지 않는 하위 컨트롤 요소를 포함하지 않은 <fieldset> 요소

제약 조건 유효성 검사(constraint validation) 대상

:valid는 사용자에게 제약 조건에 대한 브라우저의 유효성 검사를 충족하거나 제약 조건 자체가 없어서 유효성 검사를 충족한 상태의 폼 관련 요소를 선택할 수 있는 가상 클래스입니다.

여기에서는 제약 조건 자체가 없어서 유효성 검사를 충족한 상태의 요소가 아닌, 제약 조건 유효성 검사 대상에 대해 살펴봅니다.

  • 특정 형식의 값을 요구하는 컨트롤 요소
  • HTML 속성으로 제약 조건이 설정된 컨트롤 요소
    • required 속성 지정으로 필수 컨트롤로 설정된 요소
    • pattern 속성으로 인해 정규표현식(Regex) 패턴 검증이 설정된 컨트롤 요소
    • maxlength 속성으로 인해 입력할 수 있는 최대 문자 수(Maximum length)를 제한받는 컨트롤 요소
    • minlength 속성으로 인해 입력할 수 있는 입력해야 하는 최소 문자 수(Minimum length)를 요구하는 컨트롤 요소
    • max 속성으로 인해 필드에 입력할수 있는 숫자의 최댓값을 제한받는 컨트롤 요소
    • min 속성으로 인해 필드에 입력할수 있는 숫자의 최솟값을 요구하는 컨트롤 요소
    • step 속성으로 인해 필드에 입력할수 있는 숫자의 간격(Step)을 제한받는 컨트롤 요소 (단, min 속성과 함께 사용하여 기준점을 명시해야 초깃값에 대한 유효성 검사가 정상적으로 작동합니다. The step base is the value returned by the following algorithm을 참고하세요.)
  • 기타 여기에서는 언급되지 않은 HTML 명세에 따라 제약 조건 유효성 검사의 대상이 되는 컨트롤 요소

제약 조건 유효성 검사 제외 대상

제약 조건 유효성 검사 대상 요소이지만 다음의 경우에는 제약 조건 유효성 검사 대상에서 제외됩니다.

  • disabled 속성으로 인해 비활성화된 컨트롤 요소
  • novalidate 속성의 지정으로 유효성 검사를 수행하지 않는 <form> 요소에 포함된 컨트롤 요소
  • formnovalidate 속성 지정으로 폼 제출 시 검증되지 않아야 하는 <button type="submit"> 요소

제약 조건 유효성 검사 시점

브라우저가 제약 조건을 검사하여 :valid 상태를 결정하는 시점은 속성에 따라 두 가지로 나뉩니다.

  1. 즉시 검사 (페이지 로드 시점)
  2. 사용자 상호작용 후 검사 (수정 시점)

즉시 검사 (페이지 로드 시점)

다음의 요소나 속성은 사용자가 별도의 입력을 하지 않아도, 페이지가 로드될 때 유효성 검사에 충족하면 즉시 :valid 상태가 됩니다.

  • 제약 조건 유효성 검사(constraint validation)을 적용할 수 있이나 제약 조건이 없어서 당연히 유효성 검사를 충족한 컨트롤 요소
  • required 속성 지정으로 필수 컨트롤로 설정된 요소에 값이 입력된 경우
  • <input type="email">, <input type="url">: 초깃값이 형식에 맞는 경우
  • pattern: 정규 표현식 패턴 검사 통과
  • step: 숫자 간격
예제
CSS 
input:valid {
    border: 2px solid green;
    background-color: beige;
}
HTML 
<form>
        <p>
            <label for="username">이름</label>
            <!-- 제약 조건 유효성 검사(constraint validation)을 적용할 수 있이나 
                 제약 조건이 없어서
                 당연히 유효성 검사를 충족한 컨트롤 요소 -->
            <input id="username" type="text">
        </p>
        <p>
            <label for="useremail">이메일</label>
            <!-- 이메일 형식을 올바로 입력한 상태의 요소: 유효성 검사를 충족 함-->
            <input id="useremail" type="email" value="account@exmaple.com">
        </p>
</form>

초깃값이 제약 조건에 맞으면 즉시 :valid 상태가 됩니다.

실제 적용된 모습

사용자 상호작용 후 검사 (수정 시점)

다음 속성들은 페이지가 로드되었을 때 초깃값이 제약 조건에 맞거나 맞지 않더라도 일단 :valid가 적용됩니다. 하지만, 사용자가 값을 수정하거나 입력을 시도하여 요소의 상태가 변경(Dirty state, 사용자가 수정한 상태)이 되는 시점부터 검사를 시작해서 제약 조건에 맞으면 :valid가 적용되고, 맞지 않으면 :valid가 적용되지 않습니다.

  • maxlength, minlength 속성으로 인해 글자 수가 제한된 경우
    • 페이지가 로드될 때, 초깃값이 제약 조건에 맞거나 맞지 않더라도 :valid 상태가 적용됩니다.
    • 사용자가 값을 수정하면 글자 수 제약을 충족하는 경우에만 :valid 상태가 적용됩니다.
예제
CSS 
input:valid {
    border: 2px solid green;
    background-color: beige;
}
HTML 
<form>
    <label for="maxlength">최소 글자수 (수정 시점)</label>
    <input id="maxlength" type="text" minlength="5" value="123">
    <small>최소 5글자</small>
</form>

페이지가 로드되었을 때 초깃값이 제약 조건에 맞거나 맞지 않더라도 일단 :valid가 적용됩니다. 하지만, 사용자가 값을 수정하거나 입력을 시도하여 요소의 상태가 변경(Dirty state, 사용자가 수정한 상태)이 되는 시점부터 검사를 시작해서 제약 조건에 맞으면 :valid가 적용되고, 맞지 않으면 :valid가 적용되지 않습니다.

실제 적용된 모습

접근성 고려 사항

:valid는 일반적으로 유효한 값을 입력했거나 선택할 때 시각적으로 표현하기 위한 가상 클래스 선택자입니다. 사용자가 유효한 항목임을 쉽게 인지할 수 있도록, 시각적으로 뚜렷한 스타일을 적용하세요.

  • 시각적 명확성: 유효한 항목에 적용하는 배경색이나 테두리는 주변 요소와 충분한 명도 대비를 이루어야 합니다. 사용자가 화면을 훑어볼 때 어떤 항목이 필수인지 즉각적으로 인지할 수 있도록 뚜렷한 스타일을 적용하세요.
  • 상태 변화의 일관성: 유효한 항목의 스타일이 폼 전체의 디자인 시스템 내에서 일관되게 유지되어야 사용자가 혼란을 느끼지 않습니다.

추가 예제

다음은 :valid에 대한 이해를 돕는 추가 예제입니다.

<form> 요소를 선택하기

이 예제는 유효성 검사를 충족하는 컨트롤 요소를 포함한 폼 전체를 :valid로 선택하여 스타일을 적용합니다.

CSS 
form:valid {
    border: 2px solid green;
    background-color: beige;
}
form {
    padding: 1em;
}
HTML 
<form>
    <fieldset>
        <legend>사용자 정보 입력 확인</legend>
        <p>
            <label for="username">이름(필수)</label>
            <input id="username" type="text"  value="홍길동" required> <!-- 필수 입력 -->
        </p>
        <p>
            <label for="useremail">이메일</label>
            <!-- 이메일 형식을 올바로 입력한 상태의 요소: 유효성 검사를 충족 함-->
            <input id="useremail" type="email" value="account@exmaple.com">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 이메일 형식을 올바르지 않게 고쳐보세요.
올바른 이메일 주소(account@exmaple.com)를 account@@@@example.com처럼 잘못된 형식으로 수정하면, 폼 영역의 스타일이 바뀌고 유효성 검사를 충족하지 못할 것입니다. 또한 필수 입력 값인 이름의 글자를 지워도 :valid로 적용된 폼 영역의 스타일이 지워집니다.

<fieldset> 요소를 선택 예제

이 예제는 유효성 검사를 충족하는 컨트롤 요소를 포함한 필드셋 요소를 :valid로 선택하여 스타일을 적용합니다.

CSS 
fieldset:valid {
    border: 2px solid green;
    background-color: beige;
}
form {
    padding: 1em;
}
HTML 
<form>
    <fieldset>
        <legend>사용자 정보 입력 확인</legend>
        <p>
            <label for="username">이름(필수)</label>
            <input id="username" type="text"  value="홍길동" required> <!-- 필수 입력 -->
        </p>
        <p>
            <label for="useremail">이메일</label>
            <!-- 이메일 형식을 올바로 입력한 상태의 요소: 유효성 검사를 충족 함-->
            <input id="useremail" type="email" value="account@exmaple.com">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 이메일 형식을 올바르지 않게 고쳐보세요.
올바른 이메일 주소(account@exmaple.com)를 account@@@@example.com처럼 잘못된 형식으로 수정하면, 필드셋 영역의 스타일이 바뀌고 유효성 검사를 충족하지 못할 것입니다. 또한 필수 입력 값인 이름의 글자를 지워도 :valid로 적용된 필드셋 영역의 스타일이 지워집니다.

다양한 유효성 검사 대상 선택

CSS 
input:valid {
    border: 2px solid green;
    background-color: beige;
}
HTML 
<form>
    <fieldset>
        <legend>웹사이트 등록 정보 확인</legend>
        
        <p>
            <label for="sitename">사이트명(필수):</label>
            <input type="text" id="sitename" required value="샘플 사이트">
        </p>

        <p>
            <label for="siteurl">사이트 주소:</label>
            <input type="url" id="siteurl" value="https://example.com">
        </p>

        <p>
            <label for="rating">추천 점수(1~5):</label>
            <input type="number" id="rating" min="1" max="5" value="3">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습

브라우저 호환성

:valid 가상 클래스의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:valid 10 12 4 5
<form> 요소에 적용 40 79 13 9

명세서

:valid 가상 클래스의 명세서 사양
명세서 사양
:valid HTML
#selector-valid
:valid Selectors Level 4
#valid-pseudo

참고문헌

같이 보기