BAEL-4223: Displaying Spring error messages with Thymeleaf (#10652)

2021-04-14 01:25:33 +05:30
parent 45b8a5d399
commit e0b4e6bcd6
8 changed files with 284 additions and 1 deletions
@@ -0,0 +1,6 @@
+spring.datasource.url=jdbc:h2:mem:testdb
+spring.datasource.driverClassName=org.h2.Driver
+spring.datasource.username=sa
+spring.datasource.password=password
+spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
+spring.main.allow-bean-definition-overriding=true
@@ -0,0 +1,77 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:th="http://www.thymeleaf.org">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.error {
+	color: red;
+}
+</style>
+<title>Displaying Error Messages with Thymeleaf</title>
+</head>
+<body>
+	<div>
+		<div>
+			<h2>Add a Record</h2>
+			<form action="#" th:action="@{/add}" th:object="${user}"
+				method="post" class="form">
+				<div>
+					<label for="fullName">Name</label> <input type="text"
+						th:field="*{fullName}" id="fullName" placeholder="Full Name">
+					<ul>
+						<li th:each="err : ${#fields.errors('fullName')}" th:text="${err}"
+							class="error" />
+					</ul>
+				</div>
+				<div>
+					<label for="email">Email</label> <input type="text"
+						th:field="*{email}" />
+					<p th:if="${#fields.hasErrors('email')}"
+						th:class="${#fields.hasErrors('email')}? error"
+						th:errors="*{email}" />
+				</div>
+				<div>
+					<label for="age">Age</label> <input type="text" th:field="*{age}"
+						id="age">
+					<p th:if="${#fields.hasErrors('age')}"
+						th:class="${#fields.hasErrors('age')}? error">Invalid Age</p>
+				</div>
+				<div>
+					<label for="country">Country</label> <input type="text"
+						th:field="*{country}" />
+					<p th:if="${#fields.hasErrors('country')}" th:errorclass="error"
+						th:errors="*{country}" />
+				</div>
+				<div>
+					<label for="phoneNumber">Phone Number</label> <input type="text"
+						th:field="*{phoneNumber}" />
+					<p th:if="${#fields.hasErrors('phoneNumber')}"
+						th:errorclass="error" th:errors="*{phoneNumber}" />
+				</div>
+				<div th:if="${#fields.hasErrors('global')}">
+					<h3>Global errors:</h3>
+					<p th:each="err : ${#fields.errors('global')}" th:text="${err}"
+						class="error" />
+				</div>
+				<h3>All errors in place:</h3>
+				<div th:if="${#fields.hasAnyErrors()}">
+					<ul>
+						<li th:each="err : ${#fields.allErrors()}" th:text="${err}" />
+					</ul>
+				</div>
+				<input type="submit" value="Add Me">
+			</form>
+			<h3>This is outside the form:</h3>
+			<h4>Errors on a single field:</h4>
+			<div th:if="${#fields.hasErrors('${user.email}')}"
+				th:errors="*{user.email}"></div>
+			<h4>All errors:</h4>
+			<ul>
+				<li th:each="err : ${#fields.errors('user.*')}" th:text="${err}" />
+			</ul>
+		</div>
+	</div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:th="http://www.thymeleaf.org">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Displaying Error Messages with Thymeleaf</title>
+</head>
+<body>
+	<div>
+		<div>
+			<h3>Users</h3>
+			<table class="table">
+				<tr>
+					<th>ID</th>
+					<th>Full name</th>
+					<th>Email</th>
+					<th>Age</th>
+					<th>Country</th>
+					<th>Phone Number</th>
+				</tr>
+				<tr th:each="user: ${users}">
+					<td th:text="${user.id}" />
+					<td th:text="${user.fullName}" />
+					<td th:text="${user.email}" />
+					<td th:text="${user.age}" />
+					<td th:text="${user.country}" />
+					<td th:text="${user.phoneNumber}" />
+				</tr>
+			</table>
+		</div>
+	</div>
+</body>
+</html>