https://azukiazusa.dev/blog/user-valid-and-user-invalid-pseudo-classes/
※Chrome 119、Edge 119、Firefox 88、Safari 16.5 以降で利用可能
:user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。
- required 属性を指定した要素に値が入力されているか
- pattern 属性を指定した要素に指定した正規表現にマッチしているか
- min や max 属性を指定した要素に指定した範囲内の値が入力されているか
- type=”email” などの type 属性に指定した型に値が入力されているか
:user-valid は検証の結果要素が有効である場合に適用されます。つまり、required 属性が指定された 要素に値が入力されている場合に適用されます。
反対に :user-invalid は検証の結果要素が無効である場合に適用されます。つまり required 属性が指定された 要素に値が入力されていない場合です。
フォームの検証結果に基づき要素のスタイルを変更するためには、従来は :valid、:invalid 擬似クラスを使用していました。しかし、:valid、:invalid 擬似クラスではページをロードした直後や入力中に評価されてしまうという欠点がありました。
ユーザーがフォームに入力する前から既にエラーを示すスタイルが適用されていると、どうしてエラーが発生しているのかわからず、ユーザーに混乱を与える恐れがあります。適切なタイミングでエラーを示すスタイルを適用するためには、JavaScript によって処理することが必要でした。
この問題を解決するために使われるのが、:user-valid、:user-invalid 擬似クラスです。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルが適用されません。以下の基準を満たした場合のみ :user-invalid 擬似クラスが適用されます。
- ユーザーがフォームにフォーカスし、何かしらの値を入力し、再度フォームからフォーカスを外した場合
- ユーザーがフォームを送信しようとした場合
:user-valid、:user-invalid は JavaScript を用いずに、適切なタイミングでエラーを示すスタイルを適用するために有益です。
