このページは Cloud Translation API によって翻訳されました。

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

:user-valid

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

:user-invalid

対応ブラウザ

<ph type="x-smartling-placeholder">

ソース

ユーザー入力は、どのユーザーインターフェースでも特に注意が必要な事項の 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 では、追加のステートフルコードを記述する必要がありました。初期値、現在のフォーカス状態、値に対するユーザーの変化の程度に応じて、追加の有効性を最後にスタイル設定のために選択するクラスを追加しますブラウザがこれらすべてを自動的に処理するようになりました。

その他のリソース

<ph type="x-smartling-placeholder"></ph> Behzad Ghaffarian によるカバー写真、スプラッシュを解除。

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

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

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

少ないコードでユーザー エクスペリエンスを向上

その他のリソース

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

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

少ないコードでユーザーエクスペリエンスを向上