Struts2によるバリデーション実装の集大成として、Ajaxとの連携によるバリデーション制御を解説します。
本記事では、サーバーサイドの robust な検証処理を維持しながら、フロント側での応答性やUXを両立するテクニックを紹介！
🔍 本記事で実現すること
- ✅ フォーム入力中に 即時バリデーション（例：ID重複チェックなど）
- ✅ Struts2のActionに対して 非同期リクエストでvalidate()を走らせる
- ✅ フロントでのバリデーション結果をユーザーに即時フィードバック
🛠 前提環境
- Struts2（本プロジェクトの既存構成）
- jQuery（Ajax利用）
- 入力画面（例：ユーザー新規登録画面）
💡 実装方針：サーバー側validate() × jQuery Ajax の分離活用
📌 Ajax専用Actionを用意
public class AjaxUserIdCheckAction extends ActionSupport {
private String userId;
private boolean exists;
public String execute() {
// DBチェック処理
exists = UserDao.checkExists(userId);
return SUCCESS;
}
// Getter/Setter
}
📌 struts.xml にマッピング
<action name="ajaxUserIdCheck" class="com.company.action.AjaxUserIdCheckAction">
<result name="success" type="json"/>
</action>
※ type="json" を指定することで、JSON形式でレスポンス
🧪 jQuery で非同期チェック
<input type="text" id="userId" name="userId" />
<span id="checkResult"></span>
<script>
$('#userId').on('blur', function() {
$.ajax({
url: 'ajaxUserIdCheck.action',
data: { userId: $(this).val() },
dataType: 'json',
success: function(response) {
if (response.exists) {
$('#checkResult').text('すでに使用されているIDです').css('color', 'red');
} else {
$('#checkResult').text('使用可能です').css('color', 'green');
}
}
});
});
</script>
📝 補足：実務での活用ポイント
-
✅ Ajaxは 応答性UP に最適。ただし、最終的なチェックは 必ずサーバー側で
validate()を行う！ -
✅ Ajax専用Actionでは、バリデーション結果を簡易JSONで返す構成が現実的
-
✅ 複数項目を一括チェックする場合は、専用DTOやMap構成も検討
🧭 これにて Vol.9シリーズ 完結！
Struts2の入力チェック機構は、基本的な使い方から拡張、UI連携、テスト、UX、国際化まで非常に幅広いテーマがあります。
このVol.9シリーズでは、実務ですぐに使えるエッセンスに絞ってまとめました。
✨ 今後の予定？
Struts2の次なるステップとして、以下も検討中です：
-
Vol.10シリーズ：セキュリティ（CSRF／XSS／認可）
-
Vol.11シリーズ：例外処理・ログ設計・監視系
-
Vol.12シリーズ：DB連携・トランザクション・DAO設計
引き続き、実務的な構成でお届けします！
✅ 参考リポジトリ
🔗 GitHub：Portfolio_Bulletinboard - GitHub