teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Thymeleafで入力フォームのバリデーションチェックを実装したい

編集履歴

質問編集履歴

3

エラー追記

2021/07/23 12:13

投稿

weeno02
weeno02

スコア6

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  **Thymeleaf を用いているJavaのバリデーションチェックで、元の値をhtmlの入力フォームに表示させつつ新たに入力された値が適切かどうかを判定したい**です
5
5
 
6
-
7
6
  ファイル構成は以下の画像のようになっております（画面からは見切れていますがtemplatesフォルダ内にhtml一式が格納されています）
8
7
  ![イメージ説明](de2d3b2142e2bbaa2bbb66f7a86bb2e3.png)
9
8
  ### 発生している問題・エラーメッセージ
@@ -59,13 +58,7 @@
59
58
 
60
59
  <script>
61
60
  function MoveCheck() {
62
- if( confirm("更新してもいいですかー？") ) {
63
- return true;
64
- }
65
- else {
61
+ i省略
66
- alert("更新をやめました。");
67
- return false;
68
- }
69
62
  }
70
63
  </script>
71
64
  </body>
@@ -79,46 +72,7 @@
79
72
 
80
73
  以下、**UpdateForm.java**です
81
74
  ```Java
82
- import java.io.Serializable;
83
- import java.sql.Date;
84
-
85
- import javax.validation.constraints.NotBlank;
86
- import javax.validation.constraints.NotEmpty;
87
- import javax.validation.constraints.Pattern;
88
- import javax.validation.constraints.Size;
89
-
90
-
91
- public class UpdateForm implements Serializable{
92
-
93
- @NotBlank(message = "タイトルを入力してね")
94
- @Size(min = 1, max = 200, message = "タイトルは1文字以上200文字以内で入力してください")
95
- private String title;
96
-
97
- @NotEmpty(message = "著者を入力してね")
98
- @Size(min = 1, max = 200, message = "著者は1文字以上200文字以内で入力してください")
99
- private String writer;
100
-
101
- @NotEmpty(message = "出版社を入力してね")
102
- @Size(min = 1, max = 200, message = "出版社は1文字以上200文字以内で入力してください")
103
- private String publisher;
104
-
105
- @NotEmpty(message = "値段を入力してね")
106
- @Size(min = 2, max = 16, message = "値段は2ケタ以上16ケタ以内で入力してください")
107
- @Pattern(regexp = "[0-9０-９]{1,16}", message = "数字で入力してください")
108
- private int price;
109
-
110
- @NotEmpty(message = "購入年月日を入力してね")
111
- @Pattern(regexp = "19[0-9]{2}|20[0-9]{2})/([1-9]|1[0-2])/([1-9]|[12][0-9]|3[01]", message = "1900/1/1 ~ 2099/12/31で入力してください")
112
- private Date bought;
113
-
114
- @NotEmpty(message = "管理部署を入力してね")
115
- private String mngDept;
116
-
117
-
118
- //getter/setter の定義
75
+ 字数制限のため**追記の方にまとめて記載**しました。そちらをご覧ください
119
- //ここでは省略させていただきます
120
-
121
- }
122
76
  ```
123
77
 
124
78
 
@@ -128,17 +82,11 @@
128
82
  ![イメージ説明](41f4a9acc0198527a52651db22041856.png)
129
83
  ### 試したこと
130
84
  [https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/14/162616](https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/14/162616)
131
- [https://www.it-swarm-ja.com/ja/thymeleaf/thymeleaf%EF%BC%9Ath%EF%BC%9Afield%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%80%81th%EF%BC%9Avalue%E3%81%AF%E7%84%A1%E8%A6%96%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99/1049938376/](https://www.it-swarm-ja.com/ja/thymeleaf/thymeleaf%EF%BC%9Ath%EF%BC%9Afield%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%80%81th%EF%BC%9Avalue%E3%81%AF%E7%84%A1%E8%A6%96%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99/1049938376/)
132
85
 
86
+
133
87
  を参考にinputタグの中身をいじったりもしたのですが現状うまくいっておりません
134
88
 
135
- また、
136
- th:field = "*{title}"や、th:field = "*{writer}"
137
89
 
138
- だと入力フォームにBookの情報が表示されなくなってしまう
139
-
140
-
141
-
142
90
  ### 該当のソースコード
143
91
  入力フォームへと遷移する
144
92
  ```Java
@@ -162,21 +110,7 @@
162
110
  入力フォームから入力完了画面へと遷移する
163
111
  ここで入力フォームにエラーが確認されたら再度入力フォームへ遷移する
164
112
  ```Java
165
- /**
113
+
166
- * 書籍情報更新完了画面へ遷移
167
- * @param updated 更新完了時刻
168
- * @param bookID 書籍ID
169
- * @param title 書籍題目
170
- * @param writer 書籍著者
171
- * @param publisher 書籍出版社
172
- * @param price 書籍値段
173
- * @param bought 書籍購入日時
174
- * @param mngDept 書籍管理担当部署
175
- * @param updatorDept 更新者の部署名
176
- * @param userName 更新者名
177
- * @param model
178
- * @return 更新完了画面 or ログイン画面
179
- */
180
114
  @RequestMapping(value = "/updateResult", method = RequestMethod.POST)
181
115
  public String updateResult(
182
116
  @Validated
@@ -216,4 +150,145 @@
216
150
  ### 補足情報（FW/ツールのバージョンなど）
217
151
 
218
152
  Spring Boot 2.5.2
219
- お手数ですがご教授お願い致します。
153
+ お手数ですがご教授お願い致します。
154
+
155
+
156
+ ###追記
157
+ Contoroller部分、HTML部分, JavaのForm部分を以下のように書き換えたのですがうまく動きませんでした(例外スローされてしまう)。
158
+
159
+ Controller
160
+ ```JAVA
161
+ @RequestMapping(value = "/updateResult", method = RequestMethod.POST)
162
+ public String updateResult(
163
+ /*リクエストパラメタ一式を削除*/
164
+ @ModelAttribute
165
+ @Validated UpdateForm updateForm,
166
+ BindingResult result,
167
+ Model model) {
168
+ if(loginSessionCheck() == false) {
169
+ return "index";
170
+ }
171
+ //エラー内容をリストに詰めてupdate画面側に返却します
172
+ System.out.println("result = " + result);
173
+ if (result.hasErrors() == true) {
174
+ List<String> errorList = new ArrayList<String>();
175
+ for (ObjectError error : result.getAllErrors()) {
176
+ errorList.add(error.getDefaultMessage());
177
+ }
178
+ model.addAttribute("validationError", errorList);
179
+ return "update";
180
+ }
181
+
182
+ /*書籍更新処理 ここでは省略させていただきます*/
183
+
184
+ return "updateResult";
185
+ }
186
+ ```
187
+
188
+
189
+
190
+ HTML
191
+ ```HTML
192
+
193
+ <table>
194
+ <tr th:if="${validationError}" th:each="error : ${validationError}">
195
+ <td style="color: red;" th:text="${error}"></td>
196
+ </tr>
197
+ </table>
198
+
199
+ <form th:method="POST" th:action=@{/updateResult} onSubmit="return MoveCheck()" th:object="${updateForm}">
200
+ 書籍ID（自動入力） <p style="display:inline;" th:text="${book.bookID}"></p><br>
201
+ <br>
202
+ タイトル: <input type="text" th:name="title" th:id="title" th:value="${book.title}" placeholder="">
203
+ <br>
204
+ 著者: <input type="text" th:value="${book.writer}" placeholder="" th:name="writer" th:id="writer">
205
+ <br>
206
+ 出版社: <input type="text" th:value="${publisher.publisherName}" placeholder="" th:name="publisher" th:id="publisherr">
207
+ <br>
208
+ 価格: <input type="number" th:value="${book.price}" placeholder="" th:name="price" th:id="price">
209
+ <br>
210
+ 購入日: <input type="date" th:value="${book.bought}" placeholder="" th:name="bought" th:id="bought" min="1900-01-01" max="2021-12-31">
211
+ <br>
212
+ 書籍管理部門: <input type="text" th:value="${department.deptName}" placeholder="" th:name="mngDept" th:id="mngDept">
213
+ <br>
214
+ 更新日（自動入力）<p style="display:inline;" th:name="Timestamp" th:id="Timestamp" th:text="${#calendars.format(#calendars.createNowForTimeZone('Asia/Tokyo'), 'yyyy-MM-dd HH:mm:ss')}"></p><br>
215
+ <br>
216
+ 更新者（自動入力） <p style="display:inline;" th:name="userName" th:id="userName" th:text="${user.name}"></p><br>
217
+ <br>
218
+ 更新者部署（自動入力） <p style="display:inline;" th:name="updatorDept" th:id="tupdatorDept" th:text="${department.deptName}"></p><br>
219
+ <br>
220
+
221
+ <button type="button" onclick="history.back()">戻る</button>
222
+ <input type="hidden" th:id="bookID" th:name="bookID" th:value="${book.bookID}">
223
+
224
+ <input type="submit" value="更新する">
225
+ </form>
226
+
227
+ <script>
228
+ function MoveCheck() {
229
+ 省略
230
+ }
231
+
232
+ ```
233
+
234
+ FORM部分
235
+ ```JAVA
236
+ import java.io.Serializable;
237
+ import java.sql.Timestamp;
238
+ import java.util.Date;
239
+
240
+ import javax.validation.constraints.Min;
241
+ import javax.validation.constraints.NotBlank;
242
+ import javax.validation.constraints.NotEmpty;
243
+ import javax.validation.constraints.NotNull;
244
+ import javax.validation.constraints.Size;
245
+
246
+
247
+ public class UpdateForm implements Serializable{
248
+
249
+ @NotBlank(message = "タイトルを入力してね")
250
+ @Size(min = 1, max = 200, message = "タイトルは1文字以上200文字以内で入力してください")
251
+ private String title;
252
+
253
+ @NotEmpty(message = "著者を入力してね")
254
+ @Size(min = 1, max = 200, message = "著者は1文字以上200文字以内で入力してください")
255
+ private String writer;
256
+
257
+ @NotEmpty(message = "出版社を入力してね")
258
+ @Size(min = 1, max = 200, message = "出版社は1文字以上200文字以内で入力してください")
259
+ private String publisher;
260
+
261
+ @NotNull(message = "値段を入力してね")
262
+ @Min(value = 10, message = "{value}以上の値を設定してください")
263
+ private Integer price;
264
+
265
+ @NotNull(message = "購入年月日を入力してね")
266
+ private Date bought;
267
+
268
+ @NotEmpty(message = "管理部署を入力してね")
269
+ private String mngDept;
270
+
271
+ private String updatorDept;
272
+
273
+ private String userName;
274
+
275
+ private int bookID;
276
+
277
+ private Timestamp updated;
278
+
279
+ /* getter/setter は省略させていただきます */
280
+ }
281
+ ```
282
+
283
+
284
+ エラー文 必要そうな部分のみ抜粋
285
+ （boughtを String から Date に変換できない、と15行目のbookIDがおかしいという指摘？）
286
+
287
+ ```
288
+ Field error in object 'updateForm' on field 'bought': rejected value [2020-12-13]; codes [typeMismatch.updateForm.bought,typeMismatch.bought,typeMismatch.java.util.Date,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [updateForm.bought,bought]; arguments []; default message [bought]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'bought'; nested exception is org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.String] to type [@javax.validation.constraints.NotNull java.util.Date] for value '2020-12-13'; nested exception is java.lang.IllegalArgumentException]
289
+ 2021-07-23 20:57:28.304 ERROR 18044 --- [nio-8082-exec-5] org.thymeleaf.TemplateEngine  : [THYMELEAF][http-nio-8082-exec-5] Exception processing template "update": Exception evaluating SpringEL expression: "book.bookID" (template: "update" - line 15, col 39)
290
+
291
+ org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "book.bookID" (template: "update" - line 15, col 39)
292
+ ```
293
+
294
+ 2つ目のエラーのbookID部分がいまいち理解できておりません・・

2

言葉の変更

2021/07/23 12:13

投稿

weeno02
weeno02

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ### 前提・実現したいこと
2
2
  Spring Boot を用いてJavaによるウェブページ作成を行っています
3
3
 
4
- **Thymeleaf のバリデーションチェックで、元の値をhtmlの入力フォームに表示させつつ新たに入力された値が適切かどうかを判定したい**です
4
+ **Thymeleaf を用いているJavaのバリデーションチェックで、元の値をhtmlの入力フォームに表示させつつ新たに入力された値が適切かどうかを判定したい**です
5
5
 
6
6
 
7
7
  ファイル構成は以下の画像のようになっております（画面からは見切れていますがtemplatesフォルダ内にhtml一式が格納されています）

1

一部文字を強調しました

2021/07/22 06:51

投稿

weeno02
weeno02

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ### 前提・実現したいこと
2
2
  Spring Boot を用いてJavaによるウェブページ作成を行っています
3
3
 
4
- Thymeleaf のバリデーションチェックで、元の値をhtmlの入力フォームに表示させつつ新たに入力された値が適切かどうかを判定したい
4
+ **Thymeleaf のバリデーションチェックで、元の値をhtmlの入力フォームに表示させつつ新たに入力された値が適切かどうかを判定したい**です
5
5
 
6
6
 
7
7
  ファイル構成は以下の画像のようになっております（画面からは見切れていますがtemplatesフォルダ内にhtml一式が格納されています）