:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う

:user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。

required 属性を指定した要素に値が入力されているか
pattern 属性を指定した要素に指定した正規表現にマッチしているか
min や max 属性を指定した要素に指定した範囲内の値が入力されているか
type="email" などの type 属性に指定した型に値が入力されているか

:user-valid は検証の結果要素が有効である場合に適用されます。つまり、required 属性が指定された <input> 要素に値が入力されている場合に適用されます。

反対に :user-invalid は検証の結果要素が無効である場合に適用されます。つまり required 属性が指定された <input> 要素に値が入力されていない場合です。

`:valid`、`:invalid` 擬似クラスとの違い

フォームの検証結果に基づき要素のスタイルを変更するためには、従来は :valid、:invalid 擬似クラスを使用していました。しかし、:valid、:invalid 擬似クラスではページをロードした直後や入力中に評価されてしまうという欠点がありました。

ユーザーがフォームに入力する前から既にエラーを示すスタイルが適用されていると、どうしてエラーが発生しているのかわからず、ユーザーに混乱を与える恐れがあります。適切なタイミングでエラーを示すスタイルを適用するためには、JavaScript によって処理することが必要でした。

以下の例では、ページをロードした直後からすべての入力フォームが赤枠で表示されてしまっています。

この問題を解決するために使われるのが、:user-valid、:user-invalid 擬似クラスです。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。以下の基準を満たした場合のみ :user-invalid 擬似クラスが適用されます。

ユーザーがフォームにフォーカスし、何かしらの値を入力し、再度フォームからフォーカスを外した場合
ユーザーがフォームを送信しようとした場合

以下の例では、ページをロードした直後は :user-invalid 擬似クラスが適用されておらず、入力フォームが赤い枠線で囲まれていないことがわかります。

Note

:user-valid、:user-invalid 擬似クラスは Chrome 119、Firefox 88、Safari 16.5 以降で利用可能です。

:user-valid、:user-invalid は JavaScript を用いずに、適切なタイミングでエラーを示すスタイルを適用するために有益です。

アクセシビリティ上の考慮事項

入力フォームにエラーがあることを示す際に、ボーダーの色を変えることはよく見られますが、この対応のみではアクセシビリティ上の問題が残ります。例えば、色覚障害を持つユーザーは、ボーダーの色の変化に気づくことができません。また、たとえボーダーの色の変化に気づいたとしても、なぜエラーが発生したのか理解できないおそれがあります。

アクセシビリティに考慮したフォームを設計するためには、単なる装飾に加えてエラー文言を表示するなどの処理が必要です。

エラー文言を出し分けるためには一見 JavaScript が必要に思えますが、:user-invalid 擬似クラスと :has() 擬似クラスを組み合わせることで、JavaScript を用いずにエラー文言を出し分けることができます。この場合でも :invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではエラー文言は表示されないことが有効に働いています。

まとめ

:user-valid、:user-invalid 擬似クラスはユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる
:user-valid、:user-invalid 擬似クラスは :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されない
:user-valid、:user-invalid 擬似クラスは JavaScript を用いずに、適切なタイミングでエラーを示すスタイルを適用するために有益
:has 擬似クラスと組み合わせることで、JavaScript を用いずにエラー文言を出し分けることができる