Enhance Your Form Validation with Pure CSS — No JavaScript Needed!
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
ユーザーが入力フィールドと対話する際にリアルタイムの視覚的フィードバックを提供するなど、フォームに追加のバリデーションを設けることを考えたことはありますか？例えば、正しい入力には緑色の枠線を表示し、不正な入力には赤色の枠線を表示するといった具合です。通常、これを実現するにはJavaScriptやReactなどが必要で、少し複雑になることがあります。しかし、CSSだけでこれを実現できるとしたらどうでしょうか？嘘ではありません — 実際に可能なのです！
シンプルなフォームの作成
まずは簡単なHTMLフォームから始めましょう：
<form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" placeholder="Name" minLength="3" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Email" required>
<label for="password">Password:</label> <input type="password" minLength="8" id="password" name="password" placeholder="*******" required> <input type="submit" value="Submit"> </form>
上記のフォームでは、フィールドが空白のままにならないようにrequired属性を使用しています。「名前」と「パスワード」フィールドには最小文字数を強制するためにminLength属性を使用しています。さらに、より複雑なバリデーションにはpattern属性を使用することもできます。
有効および無効な状態にCSSを適用する
入力フィールドの有効および無効な状態をスタイリングするために、CSSの:validおよび:invalid疑似クラスを使用できます。以下がその方法です：
input:valid {
color: green;
}
input:invalid {
color: red;
}
ただし、注意点があります！デフォルトでは、これらの疑似クラスはページが読み込まれるとすぐにスタイルを適用するため、ユーザーが操作する前から入力が有効か無効かを示すことができます。これは常に望ましい動作とは限りません。通常、ユーザーが入力を開始した後にのみバリデーションが開始されることを望みます。
:user-validと:user-invalidの導入
この問題を解決するために、:user-validと:user-invalid疑似クラスを使用できます：
input:user-valid {
color: green;
}
input:user-invalid {
color: red;
}
残念ながら、これらの疑似クラスはブラウザのサポートが限られています。そのため、より広い互換性を確保するには、フォールバック方法が必要です。
互換性のための:not(:placeholder-shown)の使用
より一貫したブラウザサポートを実現するための代替ソリューションとして、:not(:placeholder-shown)疑似クラスを使用します。入力に表示可能なplaceholder属性があることを確認し、次のCSSを適用します：
input:not(:placeholder-shown):valid {
outline: 2px solid green;
}
input:not(:placeholder-shown):invalid {
outline: 2px solid red;
}
:not(:placeholder-shown)を:validおよび:invalidと共に使用することで、ユーザーが入力フィールドを操作した後にのみスタイルを効果的に適用でき、ほとんどの最新ブラウザで望ましい動作を実現できます。
結論
これらのCSS技術を使用すると、JavaScriptに頼ることなく、フォームにインタラクティブなリアルタイムのバリデーションを簡単に追加できます。このアプローチはコードベースを簡素化するだけでなく、即座のフィードバックによってユーザー体験も向上させます。ぜひ次のプロジェクトで試してみてください！
