:user-valid
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
:user-invalid
ユーザー入力は、どのユーザー インターフェースでも特に注意が必要な事項の 1 つです。使いやすいアプリでは、ユーザーが入力ミスを見つけて理解し、修正できるようにする必要があります。: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>
セレクタは、ユーザー操作と検証の組み合わせに基づいて照合されます。 必要があります。次のデモで、これらの機能の動作を確認できます。
少ないコードでユーザー エクスペリエンスを向上
これらの疑似クラスがなければ、
:user-valid
と :user-invalid
では、追加のステートフル コードを記述する必要がありました。
初期値、現在のフォーカス状態、
値に対するユーザーの変化の程度に応じて、追加の有効性を
最後にスタイル設定のために選択するクラスを追加しますブラウザがこれらすべてを自動的に処理するようになりました。
その他のリソース
- :user-valid - MDN ウェブ ドキュメント
- :user-invalid - MDN ウェブ ドキュメント
- ユーザー操作疑似クラス - W3C エディタの下書き
- フォームの制約検証 - MDN ウェブ ドキュメント
- フォームのユーザー補助のチュートリアル - ウェブ アクセシビリティ イニシアチブ
<ph type="x-smartling-placeholder"></ph> Behzad Ghaffarian によるカバー写真、 スプラッシュを解除。