정의 및 사용 방법

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

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

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

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

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

기본 예제

다음은 사용자가 이미 입력한 정보를 확인하는 페이지에서, 이메일 형식을 올바로 입력하지 못한 상태의 요소를 :invalid로 시각적으로 표현한 예제입니다.

CSS 
input:invalid {
    border: 1px solid red;
    background-color: beige;
}
HTML 
<form>
    <fieldset>
        <legend>사용자 정보 입력 확인</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text" value="홍길동">
        </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 
:invalid {
    /* ... */
}

선택 가능한 요소

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

  • 제약 조건 유효성 검사(constraint validation) 대상이지만 제약 조건을 충족하지 않는 요소
  • 제약 조건 유효성 검사 대상이지만 제약 조건을 충족하지 않는 하나 이상의 요소를 포함하는 <form> 요소
  • 제약 조건 유효성 검사 대상이지만 제약 조건을 충족하지 않는 하나 이상의 하위 요소를 포함하는 <fieldset> 요소

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

:invalid는 사용자에게 제약 조건에 대한 브라우저의 유효성 검사를 충족하지 못한 상태의 요소를 선택할 수 있는 가상 클래스입니다. 폼 관련 요소 중 제약 조건이 설정된 요소에만 해당됩니다.

  • 특정 형식의 값을 요구하는 컨트롤 요소
  • HTML 속성으로 제약 조건이 설정된 컨트롤 요소
    • required 속성 지정으로 필수 컨트롤로 설정된 요소
    • pattern 속성으로 인해 정규표현식(Regex) 패턴 검증이 설정된 컨트롤 요소
    • maxlength 속성으로 인해 입력할 수 있는 최대 문자 수(Maximum length)를 제한받는 컨트롤 요소
    • minlength 속성으로 인해 입력할 수 있는 입력해야 하는 최소 문자 수(Minimum length)를 요구하는 컨트롤 요소
    • max 속성으로 인해 필드에 입력할수 있는 숫자의 최댓값을 제한받는 컨트롤 요소
    • min 속성으로 인해 필드에 입력할수 있는 숫자의 최솟값을 요구하는 컨트롤 요소
  • 기타 여기에서는 언급되지 않은 HTML 명세에 따라 제약 조건 유효성 검사의 대상이 되는 컨트롤 요소

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

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

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

제약 조건 유효성 검사 시점

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

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

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

다음 속성들은 사용자가 별도의 입력을 하지 않아도, 페이지가 로드될 때 설정된 초기값이 제약 조건에 맞지 않으면 즉시 :invalid 상태가 됩니다.

  • required 속성 지정으로 필수 컨트롤로 설정된 요소에 값이 비어 있는 경우
  • <input type="email">, <input type="url">: 초기값이 형식에 맞지 않는 경우
  • pattern: 정규 표현식 패턴 검사
  • step: 숫자 간격 위반
예제
CSS 
input:invalid {
    border: 1px solid red;
    background-color: beige;
}
HTML 
<form>
    <label for="email">이메일 (required, 즉시 검사)</label>
    <input id="email" type="email" required value="잘못된값@@@example.com">
</form>

초기값이 제약 조건에 맞지 않으면 즉시 :invalid 상태가 됩니다.

실제 적용된 모습

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

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

예제
CSS 
input:invalid {
    border: 1px solid red;
    background-color: beige;
}
HTML 
<form>
    <label for="maxlength">최대 글자수 (수정 시점)</label>
    <input id="maxlength" type="text" maxlength="5" value="123456">
    <small>최대 5글자</small>
</form>

페이지가 로드되었을 때 초기값이 제약 조건에 맞지 않더라도 즉시 :invalid가 되지 않습니다. 사용자가 값을 수정하거나 입력을 시도하여 요소의 상태가 변경(Dirty state, 사용자가 수정한 상태)이 되는 시점부터 검사를 시작합니다.

실제 적용된 모습

접근성 고려 사항

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

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

추가 예제

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

<form> 요소를 선택하기

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

CSS 
form:invalid {
    border: 1px solid red;
    background-color: beige;
}
form {
    padding: 1em;
}
HTML 
<form>
    <fieldset>
        <legend>사용자 정보 입력 확인</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text" value="홍길동">
        </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처럼 올바른 형식으로 수정하면, 이메일 입력 필드의 스타일이 바뀌고 유효성 검사가 통과할 것입니다.

<fieldset> 요소를 선택 예제

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

CSS 
fieldset:invalid {
    border: 1px solid red;
    background-color: beige;
}
form {
    padding: 1em;
}
HTML 
<form>
    <fieldset>
        <legend>사용자 정보 입력 확인</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text" value="홍길동">
        </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 
input:invalid {
    border: 1px solid red;
    background-color: beige;
}
HTML 
<form>
    <fieldset>
        <legend>웹사이트 등록 정보 확인</legend>
        
        <p>
            <label for="sitename">사이트명(필수):</label>
            <input type="text" id="sitename" required>
        </p>

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

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

브라우저 호환성

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

명세서

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

참고문헌

같이 보기