🧭 本記事の目的

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＆保守性を両立するハイブリッド構成