Struts2 におけるバリデーションシリーズ、今回は「エラー表示」の UX 向上をテーマにお届けします。
🎯 本記事のゴール
-
<s:fielderror>の基本と応用的な使い方を理解 - 入力フォームとエラー表示を連携してUXを改善
- 実務的に使えるデザイン改善例を紹介
🧩 1. <s:fielderror> 基本構文のおさらい
Struts2 の入力バリデーションエラーを画面に表示するための専用タグです。
<s:fielderror />
-
すべてのフィールドのエラーメッセージをリスト形式で表示
-
通常は 内の上部に配置
フィールド単位で表示することも可能です。
<s:fielderror fieldName="username"/>
🎨 2. UIを整える！よくある表示改善テクニック
✅ 例：パスワード欄の直下に表示させる
<s:textfield name="password" label="パスワード"/>
<s:fielderror fieldName="password" cssClass="error-message"/>
✅ CSSで見た目を整える
.error-message {
color: red;
font-size: 0.9em;
margin: 2px 0 10px;
}
✨ 3. エラーがあるフィールドをハイライト！
<s:textfield name="username"
cssClass="%{#fieldErrors.username != null ? 'input-error' : ''}"
label="ユーザ名"/>
.input-error {
border: 2px solid red;
background-color: #fff0f0;
}
- エラーが発生している場合のみ、スタイルを付与
- #fieldErrors.フィールド名 で判定可能
🧠 4. fieldErrors / actionErrors / actionMessages の違い
| 種別 | 対象 | 使用タグ | 主な用途 |
|---|---|---|---|
fieldErrors |
フィールド単位のエラー | <s:fielderror> |
入力バリデーション |
actionErrors |
全体エラー（認証失敗など） | <s:actionerror> |
ロジック的な失敗 |
actionMessages |
成功メッセージなど | <s:actionmessage> |
登録成功や更新完了など |
💡 5. 実装例（GitHub）
以下のプロジェクトでは、LoginAction に対して validate() によるチェックを行い、
その結果を <s:fielderror> で表示しています。
🔗 LoginAction.java（GitHub） の validate 実装（77〜95行目）
🔗 login.jsp（GitHub）の実装 (14行目～18行目))
📝 補足Tips：複数フィールドを1箇所にまとめて表示したい場合
<c:if test="%{hasFieldErrors()}">
<ul class="error-summary">
<s:fielderror />
</ul>
</c:if>
エラーまとめ表示用の領域を作ることで、ページ上部に一覧でエラーを提示する形式も可能です。
📘 まとめ
| テクニック | 効果 |
|---|---|
<s:fielderror> 使用 |
入力ミスを視覚化 |
| CSS連動でハイライト | UX向上・入力補助 |
| 表示位置や構成の工夫 | エラー箇所がすぐわかる |
actionErrors/messagesとの併用 |
より柔軟なユーザーフィードバックが可能に |
🧭 次回予告：Vol.9.6
次回は…
🌐 多言語対応（i18n）とメッセージプロパティの使いこなし
エラー表示やラベルをリソースファイルに分離して、国際化・保守性向上を図る方法を紹介予定です！
📚 Struts2バリデーションシリーズ
🔜 Vol.9.6：多言語対応とメッセージ活用（予定）