ユーザー入力は、どのユーザー インターフェースでも特に機密性の高い懸念事項の 1 つです。使用可能なアプリケーションは、ユーザーが入力ミスを確認、理解、修正できるようにしなければなりません。:user-valid 疑似クラス セレクタと :user-invalid 疑似クラス セレクタは、ユーザーが入力を変更した後にのみ誤りに関するフィードバックを提供することで、入力検証のユーザー エクスペリエンスを改善します。これらの新しいセレクタを使用すると、ユーザーが変更した入力を追跡するためにステートフル コードを記述する必要がなくなります。
ユーザー操作の疑似クラス セレクタ
:user-valid 疑似クラス セレクタと :user-invalid 疑似クラス セレクタは、既存の :valid 疑似クラスと :invalid 疑似クラスに似ています。どちらも、現在の値が検証の制約を満たしているかどうかに基づいて、フォーム コントロールと一致します。ただし、新しい :user-valid 疑似クラスと :user-invalid 疑似クラスには、ユーザーが入力をかなり操作した後にのみ、フォーム コントロールを照合するという利点があります。
必須の空のフォーム コントロールは、ユーザーがページを操作していない場合でも :invalid に一致します。ただし、ユーザーが入力を変更して無効な状態のままにするまで、同じフォーム コントロールは :user-invalid と一致しません。
:user-valid 疑似クラスと :user-invalid 疑似クラスを使用する
これらの疑似クラスを使用して、入力コントロール、選択コントロール、テキスト領域コントロールのスタイルを設定します。次の例をご覧ください。
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
セレクタは、ユーザーの操作と検証制約の組み合わせに基づいて照合されます。次のデモを操作して、実際の動作を確認してください。
少ないコードでユーザー エクスペリエンスを向上
これらの疑似クラスがない場合、:user-valid と :user-invalid によって実現されるユーザー エクスペリエンスを実現するには、追加のステートフル コードを記述する必要がありました。このコードでは、初期値、入力の現在のフォーカス状態、ユーザーが値を変更した範囲を追跡し、追加の妥当性チェックを実行して、最終的にスタイル設定用に選択するクラスを追加する必要がありました。これらすべてを自動的に処理できるよう、ブラウザに依存できるようになりました。
その他のリソース
- :user-valid - MDN ウェブ ドキュメント
- :user-invalid - MDN ウェブ ドキュメント
- ユーザー操作の疑似クラス - W3C エディタのドラフト
- フォームの制約の検証 - MDN ウェブ ドキュメント
- フォームのユーザー補助のチュートリアル - ウェブのユーザー補助イニシアチブ
Behzad Ghaffarian 氏（Unsplash）のカバー写真