2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を

[kuracom]

type=url は ttp:// をエラーにしないのできっちりパターンで定義する必要ある / パターンはパターンでSafariが罠だったりする

[hdampty7]

いくらフロントでバリデーション頑張ってもサーバ側でもやらなければならないからアレなんだけど、要件によってはサーバサイドは全部例外にしてこまかなエラーメッセージはフロント依存ってのも現実的になったと思う

[spark7]

『:user-valid、:user-invalid疑似クラスです。これらの疑似クラスはユーザーの入力後にバリデーション結果に応じて付与されます』