ログインをして、ユーザー一覧を表示するアプリケーションを作成し、
Springでの開発について勉強していきます🌟
前回の日本語でのエラー表示に引き続きエラーメッセージを個別に表示する実装をします
前回の記事🌟
【Java・SpringBoot・Thymeleaf】日本語でエラーを表示（SpringBootアプリケーション実践編5）
##エラーメッセージを個別に表示
- htmlファイルを修正して、エラーの場合だけCSSを変更して、テキストボックスを赤くします
###エラー用CSSの追加
- th:classappend属性でCSSのclassを追加する
<div class="form-group" th:classappend="${#fields.hasErrors('userId')} ? 'has-error'">
- エラー時だけclass属性にhaserrorを追加
- haserrorはBootstrapのclassで、テキストボックスの枠を赤くする
- **
${#fields.hasErrors('<フィールド名>')}?'haserror'**で、trueかfalseかを判定 - trueの場合のみhaserror classを追加
- **
###個別エラーメッセージの表示
-
th:if属性に条件式を設定
- trueの場合のみ、そのタグが表示される
th:if="${#fields.hasErrors('<フィールド名>')}" th:errors="∗{<フィールド名>}"
<span class="text-danger"
th:if="${#fields.hasErrors('userId')}"
th:errors="*{userId}"> userId error
</span>
- 上の例では、th:if属性でフィールドのバリデーションでエラーがあるとtrueを返し、th:errors属性で各フィールドのエラーメッセージを表示する
signup.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<!-- Bootstrapの設定 -->
<link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"></link>
<script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<title>SignUp</title>
</head>
<body>
<div class="col-sm-5">
<div class="page-header">
<h1>ユーザー登録画面</h1>
</div>
<form method="post" th:action="@{/signup}" th:object="${signupForm}">
<table class="table table-bordered table-hover">
<!-- ユーザーIDの入力エリア -->
<tr>
<th class="active col-sm-3">ユーザID</th>
<td>
<!--エラー用CSSの追加-->
<div class="form-group"
th:classappend="${#fields.hasErrors('userId')} ? 'has-error'">
<input type="text" class="form-control"
th:field="*{userId}" />
<!--個別エラーメッセージ表示-->
<span class="text-danger"
th:if="${#fields.hasErrors('userId')}"
th:errors="*{userId}">
userId error
</span>
</div>
</td>
</tr>
<!-- パスワードの入力エリア -->
<tr>
<th class="active">パスワード</th>
<td>
<div class="form-group"
th:classappend="${#fields.hasErrors('password')} ? 'has-error'">
<input type="text" class="form-control"
th:field="*{password}" />
<span class="text-danger"
th:if="${#fields.hasErrors('password')}"
th:errors="*{password}">
password error
</span>
</div>
</td>
</tr>
<!-- ユーザー名の入力エリア -->
<tr>
<th class="active">ユーザー名</th>
<td>
<div class="form-group"
th:classappend="${#fields.hasErrors('userName')} ? 'has-error'">
<input type="text" class="form-control"
th:field="*{userName}" />
<span class="text-danger"
th:if="${#fields.hasErrors('userName')}"
th:errors="*{userName}">
userName error
</span>
</div>
</td>
</tr>
<!-- 誕生日の入力エリア -->
<tr>
<th class="active">誕生日</th>
<td>
<div class="form-group"
th:classappend="${#fields.hasErrors('birthday')} ? 'has-error'">
<input type="text" class="form-control" placeholder="yyyy/MM/dd"
th:field="*{birthday}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('birthday')}"
th:errors="*{birthday}">
birthday error
</span>
</div>
</td>
</tr>
<!-- 年齢の入力エリア -->
<tr>
<th class="active">年齢</th>
<td>
<div class="form-group"
th:classappend="${#fields.hasErrors('age')} ? 'has-error'">
<input type="text" class="form-control"
th:field="*{age}" />
<span class="text-danger"
th:if="${#fields.hasErrors('age')}"
th:errors="*{age}">
age error
</span>
</div>
</td>
</tr>
<!-- 結婚ステータスの入力エリア -->
<tr>
<th class="active">結婚</th>
<td>
<div class="form-group">
<div th:each="item : ${radioMarriage}">
<input type="radio" name="radioMarrige"
th:text="${item.key}"
th:value="${item.value}"
th:field="*{marriage}">
</input>
</div>
<span class="text-danger"
th:if="${#fields.hasErrors('marriage')}"
th:errors="*{marriage}">
marriage error
</span>
</div>
</td>
</tr>
</table>
<!-- エラーメッセージの一覧表示 -->
<ul>
<li th:each="error : ${#fields.detailedErrors()}">
<span th:text="${error.message}">Error message</span>
</li>
</ul>
<!-- ユーザー登録ボタン -->
<button class="btn btn-primary" type="submit">ユーザー登録</button>
</form>
</div>
</body>
</html>
#SpringBootを起動し、ユーザー登録画面を確認！
- http://localhost:8080/signup
- ユーザー登録画面で、何も入力せずにユーザー登録ボタンをクリック
- 入力項目毎にエラーメッセージを表示することができました〜〜〜p(^_^)q
- このままでは、バリデーションのチェックが全て同時に実行されていて、パスワードに何も入力してないのにエラーメッセージが複数表示されてしまっている。。。
- 次回はバリデーションチェックの順番を設定します^^
