CSSだけで、ちょっといい感じのフォームエラー表示

• エラーがテキスト直下に波線で表現されます
• エラーはフォーカスが外れている場合のみ表示されます

面白いですね。

破線表示

文字の下線にはよくあるストレートな罫線だけでなく、さまざまな形を当てはめられます。形を表すtext-decoration-styleにはsolid、double、dotted、dashedおよびwavyを指定できます。Tipsではwavyを使っています。

/* text-decoration-line、text-decoration-colorおよびtext-decoration-styleを一括指定している */
text-decoration: underline wavy red;

参考: text-decoration-style - CSS: カスケーディングスタイルシート | MDN

波線はかわいいですね。テストの答案に赤ペンで書かれた記憶があります。

フォーカスが外れている場合のみエラーを表示

フォームのバリデーションエラーは便利な反面、常に表示されていると鬱陶しく感じる場面があります。このTipsでは入力中はエラーを表示しないことで、煩わしさを軽減しています。正しい値を設定するために入力しているわけですから、操作中にエラーは必要ないですよね。

:focus-visible擬似クラスを使用することで、エラーの表示タイミングを操作しています。

:focus-visible 擬似クラスは、要素が :focus 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます (多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します)。

:focus-visible - CSS: カスケーディングスタイルシート | MDNより

コードでの該当箇所は次の箇所です。

input:not(:focus-visible):invalid {
  text-decoration: underline wavy red;
}

セレクタを見ると「フォーカスを明示するべきではないかつ値に誤りがある」場合に下線を表示するようになっています。やや複雑なセレクタですが、特定の状況下を表現できる高い表現力を有しています。

まとめ

このエラー表示がベストプラクティスになるかはわかりませんが、ひとつのテクニックとして覚えておいても損はないでしょう。CSSだけでもかなりの表現ができます。波線はどこかで使いたいなぁ。

株式会社イエソドはエンジニアを募集しています