Struts2 におけるバリデーションシリーズ、今回は「エラー表示」の UX 向上をテーマにお届けします。
🎯 本記事のゴール
-
<s:fielderror>の基本と応用的な使い方を理解 - 入力フォームとエラー表示を連携してUXを改善
- 実務的に使えるデザイン改善例を紹介
🧩 1. <s:fielderror> 基本構文のおさらい
Struts2 の入力バリデーションエラーを画面に表示するための専用タグです。
<s:fielderror />
-
すべてのフィールドのエラーメッセージをリスト形式で表示
-
通常は
<s:form>内の上部に配置
フィールド単位で表示することも可能です。
<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系で扱うトピック（予定）
| 回 | テーマ | 内容の一部紹介 |
|---|---|---|
| 9.1 |
validate()メソッドの基本 |
Struts2標準の入力チェック基礎 |
| 9.2 |
@Validations アノテーション活用 |
宣言的バリデーション設計 |
| 9.3 |
validation.xml 外部定義でのバリデーション |
大規模PJでのメンテナンス性 |
| 9.4 |
conversion.properties と型変換 |
日付/数値/Enum変換の実務対応 |
| 9.5 | 入力エラー時のメッセージ制御 |
addFieldError() / メッセージキー運用 |
| 9.6 | バリデーション共通化 | 共通部品によるDRY設計 |
| 9.7 | サーバサイドとクライアントサイドの協調 | jQueryやHTML5との併用戦略 |
| 9.8 | 実務シナリオでのバリデーション総仕上げ | 会員登録/投稿処理などの実例適用 |
| 9.9 | バリデーション処理の単体テスト編 | validate()／独自バリデータ／input遷移の検証を網羅的に |
| 9.10 | エラー表示のUIデザイン編 | 視認性・操作性を高める実践テクニック |
| 9.11 | Ajax×バリデーション連携編 | クライアント×サーバーで UX＆保守性を両立するハイブリッド構成 |