:user-validと:user-invalid擬似クラス

入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。

• 必須の入力欄に値が入力されていなければエラーとする
• メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする
• パスワードとして使用できない文字が入力されればエラーとする

入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。

:validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。

• required属性付きの入力欄が空でなければ:valid、空であれば:invalid
• type属性がemailである入力欄に入力された値がメールアドレス形式であれば:valid、そうでなければ:invalid
• min属性が付与された入力欄に入力された値がmin属性の値以上であれば:valid、そうでなければ:invalid

入力値がエラーであることを示すために入力欄の枠線の色を変えることがありますが、色に依存した表現はアクセシビリティを損なうことにつながるため、装飾とあわせてエラー文言を表示するなど、別の処理が必要になります。

しかし、:validや:invalidを使って別の要素の表示を制御するためには、label要素とフォームコントロール要素の紐づけを壊さないようにエラー文言をマークアップをする必要があり、コードが少し複雑になる場合があります。

また、:validと:invalidは、ページをロードした直後や入力途中でも評価されてしまうため、適切なタイミングで適切なエラー処理を行うためにはJavaScriptによって処理することがほとんどでした。

See the Pen :invalidの例 by ミツエーリンクス (@mitsue-links) on CodePen.

特に入力欄が多いようなフォームの場合は、ページを開いたタイミングで多くのエラーが表示されることもあり、ユーザーからしてみれば「なんでエラーが出てるのかわからない」という状況になりかねません。

そのような問題を改善してくれるのが:user-validと:user-invalidの2つの擬似クラスです。:user-validと:user-invalidは、ユーザーが入力欄を変更するなどの操作をしたタイミングで評価されるため、ページを開いた直後は:user-validと:user-invalidのどちらも適用されません。

先日WebKit Features in Safari 16.5でお知らせがあった通り、Safari 16.5から:user-valid、:user-invalidの両方が使えるようになります。

Safariはすでに:has()もサポートしているため、:has(*:user-invalid)のように:has()と組み合わせることにより、これまでJavaScriptによる表示制御を必要としてきたようなエラーの表示などもほとんどはCSSのみで実現できるようになるでしょう。

See the Pen :user-invalidの例 by ミツエーリンクス (@mitsue-links) on CodePen.

Firefoxはバージョン88とかなり早い段階で実装されており、残すはChromium系のブラウザですが、:user-validと:user-invalidはInterop 2023の注力エリアに含まれているため、こちらも期待できそうです。

実は擬似クラスの仕様はSelectorsの仕様だけでなく、HTML Standardにもあり、HTML要素のどんな状態が各擬似クラスにマッチするのかはHTML Standardに記載されています。

しかし、HTML Standardには:user-validと:user-invalidの記載はまだなく、GitHubにプルリクエストが立てられ進行中のようです。もし:user-valid、:user-invalidを使う場合は注目しておくと良いかもしれません。