:user-invalid擬似クラスを使ってみる

フォームの要素をユーザーが操作した後で、内容が有効でなかった場合にスタイルを設定できる:user-invalid擬似クラスを使ってみます。

対応ブラウザ

対応ブラウザはこちらで、主要なブラウザでサポートされていますが、Firefoxがバージョン88(2021年4月)、Safariがバージョン16.5(2023年5月)、chromeがバージョン119(2023年10月)からのサポートとなっているようなので、対応ブラウザの範囲によっては注意がいるかもしれません。

サンプルコード

実際に:user-invalidを試してみます。
:user-invalidと似た擬似クラスに:invalidがあるので、こちらもあわせて実装して比較してみます。

<form action="./">
  <input
    type="email"
    name="email"
    class="email"
    required
    placeholder="メールアドレス"
  >
  <input type="submit" value="送信">
</form>

<form action="./">
  <input
    type="email"
    name="email-invalid"
    class="email-invalid"
    required
    placeholder=":invalidのメールアドレス"
  >
  <input type="submit" value="送信">
</form>

<form action="./">
  <input
    type="email"
    name="email-user-invalid"
    class="email-user-invalid"
    required
    placeholder=":user-invalidのメールアドレス"
  >
  <input type="submit" value="送信">
</form>

未設定の場合と:invalid、:user-invalidを設定したそれぞれを比べられるように3つフォームを配置して、inputにはrequired属性を付与しています。
:invalidと:user-invalidの設定を行います。

.email-invalid:invalid {
	background-color: red;
}
.email-user-invalid:user-invalid {
	background-color: red;
}

それぞれ比べてみるとわかりやすいですが、:invalidの場合はページにアクセスじた時点で入力内容のチェックが行われるので、値が空の場合はエラーのスタイルが適用されます。
:user-invalidの場合はページにアクセスした時点ではチェックは行われず、何らか入力してフォーカスを外した時や、そのまま送信した場合にチェックが行われ、エラーのスタイルが適用されます。
:invalidと:user-invalidのデモページ