目次
1. はじめに
Web開発の中で、フォームのバリデーションは重要な役割を果たします。ユーザからの入力が期待通りの形式であることを確認し、不適切なデータの送信を防ぐことができます。そして、それらのバリデーション結果をユーザに視覚的にフィードバックすることで、ユーザ体験を向上させることができます。
本記事では、CSSの:has()擬似クラスを利用して、フォームバリデーションの結果を視覚的に表示する方法を紹介します。
2. CSS :has() 擬似クラス
:has()はCSSの擬似クラスで、引数として渡されたセレクターに該当する要素が一つ以上の要素に一致することを表します。
a:has(> img) {
border: 1px solid black;
}
上記の例では、<a>タグが<img>タグを直接子要素として含んでいる場合に、その<a>タグに対して黒い境界線を適用します。
3. フォームバリデーションの視覚化
HTMLの<form>要素内の<input>要素のバリデーション結果を視覚化するために、以下のようなCSSコードを使用することができます。
form:has(input:invalid) {
background: red;
}
form:not(:has(input:invalid)) {
background: green
}
-
form:has(input:invalid)： このセレクタは、<form>要素内に無効な（バリデーションルールに適合しない）<input>要素がある場合にマッチします。マッチすると、その<form>要素の背景色が赤になります。 -
form:not(:has(input:invalid))： このセレクタは、<form>要素内に無効な<input>要素がない場合、つまり全ての<input>要素が有効な（バリデーションルールに適合する）場合にマッチします。マッチすると、その<form>要素の背景色が緑になります。
4. 注意点
このコードは:has()擬似クラスを使用しているため、このセレクタがサポートされているブラウザでのみ動作します。また、バリデーションルールは<input>要素の属性（例えばrequiredやpatternなど）によって定義されます。
5. まとめ
CSSの:has()擬似クラスを利用すると、ユーザがフォームに無効なデータを入力した場合に視覚的なフィードバックを提供することが可能になります。これにより、ユーザ体験の向上に寄与することができます。ただし、:has()擬似クラスのブラウザ互換性を確認し、適切なバリデーションルールを設定することが重要です。