🧭 本記事の目的
Struts2のバリデーション機能を使ってエラーメッセージを表示する際、
ただ出すだけではユーザー体験（UX）を損なうこともあります。
本記事では <s:fielderror> を軸に、見やすく・分かりやすいエラー表示を
実現するためのデザイン／UI改善テクニックを紹介します。
✅ 本記事で扱うテーマ
-
<s:fielderror>のカスタマイズ表示 - 入力欄とエラーメッセージのひもづけ
- CSSによる赤枠強調や警告アイコン表示
- ツールチップやバルーンの導入
- JavaScriptと連携したリアルタイムエラーチェック
🎯 1. デフォルトの <s:fielderror> の課題
Struts2では以下のように記述することで、バリデーションエラーを一括表示できます。
<s:form action="login" method="post">
<s:fielderror />
<s:textfield name="userId" label="ユーザーID" />
<s:password name="password" label="パスワード" />
</s:form>
ただし、この方法では以下のような課題があります：
-
すべてのエラーがページ上部に表示され、どの入力欄に対応しているのか分かりにくい
-
フォームの長さによっては、エラーが視界に入らず気づかれにくい
-
エラー後の再入力が手間になる
🛠 2. 各入力欄の直下にエラーを表示する
以下のように、入力項目ごとに <s:fielderror fieldName="..." /> を使うことで、
フィールド単位でエラーメッセージを表示できます。
<s:textfield name="userId" label="ユーザーID"
cssClass="%{#fieldErrors.userId != null ? 'error-field' : ''}" />
<s:fielderror fieldName="userId" />
こうすることで、ユーザーは「どこが間違っているのか」を
視覚的にすぐ理解できるようになります。
🎨 3. CSSで赤枠表示や警告アイコンを追加
.error-field {
border: 2px solid red;
background-color: #fff0f0;
}
補足として、入力欄の右側に ⚠ アイコンを表示することも有効です。
::after 擬似要素などを使えば、デザインへの影響も最小限に抑えられます。
💡 4. ツールチップやリアルタイムチェックの導入
JavaScript（jQuery など）を活用すれば、以下のようなUX向上も可能です。
-
フォーカスアウト時に即時エラー表示
-
エラーメッセージをバルーン型で表示
-
入力中に問題箇所をリアルタイムで検知・補助
$('#userId').on('blur', function() {
if (!$(this).val()) {
$(this).addClass('error-field');
$('#userIdError').text('ユーザーIDは必須です');
}
});
🧪 5. エラー表示改善の効果まとめ
| 改善内容 | ユーザビリティへの効果 |
|---|---|
| エラーをフィールドの直下に表示 | 問題箇所がすぐ分かる |
| 赤枠や背景色による強調 | 視覚的に明示的、誤操作の防止につながる |
| 警告アイコンやツールチップ | 短文エラー＋説明補足で操作誘導がスムーズになる |
| JS連携のリアルタイム表示 | 入力中に即座に修正でき、ユーザー負荷が軽減 |
✅ まとめ
Struts2の は、ちょっとした工夫でUXが大きく改善できます。
-
入力欄との位置連動
-
視覚的な強調（CSS）
-
JavaScriptによる補助的な誘導
を組み合わせることで、ユーザーに優しいフォーム設計が実現可能です。
🧭 次回予告：Vol.9.11
次回は、複数フォームのバリデーション管理について解説！
-
複数フォームが1ページにある場合の
validate()の戦略 -
入力チェック処理の分離・共通化
-
Ajax×Struts2によるハイブリッドなバリデーション制御
など、実務で役立つ知見をお届けします！
✨ シリーズまとめ（Vol.9.x バリデーション編）
| 回 | テーマ | 内容の一部紹介 |
|---|---|---|
| 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＆保守性を両立するハイブリッド構成 |