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

公開日: 2023 年 11 月 8 日

ユーザー入力は、どのユーザー インターフェースでも最もデリケートな懸念事項の一つです。使いやすいアプリでは、ユーザーが入力ミスを見つけて理解し、修正できるようにする必要があります。:user-valid:user-invalid の疑似クラス セレクタは、ユーザーが入力を変更した後にのみエラーに関するフィードバックを提供することによって、入力検証のユーザー エクスペリエンスを向上させます。これらの新しいセレクタを使用すると、ユーザーが変更した入力をトラッキングするためのステートフル コードを記述する必要がなくなります。

ユーザー操作の疑似クラス セレクタ

:user-valid:user-invalid の疑似クラス セレクタは、既存の :valid:invalid の疑似クラスに似ています。どちらも、現在の値が検証制約を満たしているかどうかに基づいてフォーム コントロールと照合します。ただし、新しい :user-valid:user-invalid の疑似クラスの利点は、ユーザーが入力を大幅に操作した後にのみフォーム コントロールと一致することです。

必須で空のフォーム コントロールは、ユーザーがページの操作を開始していなくても :invalid と一致します。ただし、ユーザーが入力を変更して無効な状態にしない限り、同じフォーム コントロールは :user-invalid と一致しません。

:user-valid 疑似クラスと :user-invalid 疑似クラスを使用する

次の例に示すように、これらの疑似クラスを使用して、input、select、textarea コントロールのスタイルを設定します。

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>

3 つのスクリーンショットを横並びにして比較した画像。各スクリーンショットには、同じ入力、選択、テキストエリアのコントロールを持つウェブフォームが表示されています。最初のスクリーンショットは、ユーザー入力前のフォームの初期状態を示しています。コントロールの境界線はグレーで、下のヘルプテキストには、各コントロールが現在 :invalid 疑似クラス セレクタに一致することが示されます。2 つ目のスクリーンショットは、ユーザーが各コントロールに入力した後の同じフォームを示しています。コントロールの境界線は緑色で、下のヘルプテキストには、各コントロールが現在、:valid と :user-valid の疑似クラス セレクタの両方に一致することが示されています。3 つ目(最後の)スクリーンショットは、ユーザーが入力をすべて削除した後の同じフォームを示しています。コントロールの境界線は赤色で、下のヘルプテキストには、現在、各コントロールが :invalid と :user-invalid の疑似クラス セレクタの両方に一致することが示されます。

セレクタは、ユーザー操作と検証制約の組み合わせに基づいて照合されます。次のデモで、これらの機能の動作を確認できます。

コードを減らしてユーザー エクスペリエンスを向上

これらの疑似クラスがなければ、:user-valid:user-invalid によって実現されるユーザー エクスペリエンスを実現するには、追加のステートフル コードを記述する必要がありました。このコードは、初期値、入力の現在のフォーカス状態、ユーザーが値を変更した範囲を記録し、追加の有効性チェックを実行し、最後にスタイル設定用に選択するクラスを追加する必要がありました。ブラウザがこれらすべてを自動的に処理するようになりました。

その他のリソース

カバー写真: UnsplashBehzad Ghaffarian によるものです。