はじめに
2024年に主要ブラウザに対応した擬似クラス「:user-invalid」についてどんなことができるかの動作検証をした備忘録です。
擬似クラス「:user-invalid」ってなに？
:user-invalidは CSS の擬似クラスで、ユーザーの操作の後、制約検証に基づき有効と判断されなかった検証済みのフォーム要素を表します。（引用：:user-invalid (:-moz-ui-invalid) – CSS: カスケーディングスタイルシート | MDN）
入力フォームでユーザーが操作した時のみエラー表示に使えます。
動作検証
下記のようなお問い合わせフォームを作成します。
HTML
<div class="form-container">
<h2>お問い合わせフォーム</h2>
<form action="#" method="post" novalidate>
<div class="form-group">
<label for="name">名前<span class="required">必須</span></label>
<input type="text" id="name" name="name" required>
<p class="error-message">名前を入力してください</p>
</div>
<div class="form-group">
<label for="email">メールアドレス<span class="required">必須</span></label>
<input type="email" id="email" name="email" required>
<p class="error-message-required">メールアドレスを入力してください</p>
<p class="error-message-format">メールアドレスの形式が正しくありません</p>
</div>
<button class="button" type="submit">送信</button>
</form>
</div>
CSS※装飾のcssは省略しています
.required {
display: inline-block;
padding: 4px 6px;
background-color: #e4002b;
color: #fff;
font-size: 13px;
line-height: 1;
margin-left: 0.5em;
}
.error-message,
.error-message-required,
.error-message-format {
display: none;
color: #dc143c;
margin-top: 5px;
font-size: 14px;
position: absolute;
top: 100%;
left: 0;
}
input:user-invalid + .error-message,
input:required:user-invalid + .error-message-required,
input:invalid:user-invalid + .error-message-format {
display: block;
}
input:user-invalid {
border: 2px solid #dc143c;
background-color: #ffeeee;
}
input:user-valid {
border: 2px solid #2A8436;
}novalidate属性をフォームに追加し、ブラウザのデフォルトバリデーションメッセージを無効にしています。
まとめ
ユーザーの操作後のみの検証になるので、必須の場合は送信ボタンをいきなり押してもエラーメッセージは表示されません。また、メールアドレスの入力で2タイプのエラーメッセージを出し分けることはできません。CSSのみで使用する場面は少なく、JavaScriptと一緒に使用するのがベストです。
対応ブラウザ
主要ブラウザでサポートされています。（2024年07月31日現在）
参考サイト
こちらのサイトを参考にさせていただきました。
