Error Messags

Error Fields

Let’s see how we could set a specific CSS class to a field if it has an error:

<input type="text" th:field="*{datePlanted}" th:class="${#fields.hasErrors('datePlanted')}? fieldError" />

As you can see, the #fields.hasErrors(...) function receives the field expression as a parameter ( datePlanted ), and returns a boolean telling whether any validation errors exist for that field. We could also obtain all the errors for that field and iterate them:

<ul>
  <li th:each="err : ${#fields.errors('datePlanted')}" th:text="${err}" />
</ul>

oder eine Kommagerennte Liste mit den Errors

<input type="text" th:field="*{datePlanted}" />
<p th:if="${#fields.hasErrors('datePlanted')}" th:errors="*{datePlanted}">Incorrect date</p>

Die Error-Klasse

The example we saw above, setting a CSS class to a form input if that field has errors , is so common that Thymeleaf offers a specific attribute for doing exacly that: th:errorclass .

Applied to a form field tag (input, select, textarea…), it will read the name of the field to be examined from any existing name or th:field attributes in the same tag, and then append the specified CSS class to the tag if such field has any associated errors:

Die Errorclass wird zu den bestehenden Klassen hinzugefügt, ergänzt diese nur, aber ersetzt sie nicht.

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

Auf alle Errors zugreifen

As in the examples above, we could obtain all the errors and iterate them…

<ul>
  <li th:each="err : ${#fields.errors('*')}" th:text="${err}" />
</ul>

…as well as build a <br /> -separated list:

<p th:if="${#fields.hasErrors('all')}" th:errors="*{all}">Incorrect date</p>

Global errors

There is a third type of error in a Spring form: global errors. These are errors that are not associated with any specific fields in the form, but still exist. Thymeleaf offers the global constant for accessing these errors:

<ul th:if="${#fields.hasErrors('global')}">
  <li th:each="err : ${#fields.errors('global')}" th:text="${err}">Input is incorrect</li>
</ul>
<p th:if="${#fields.hasErrors('global')}" th:errors="*{global}">Incorrect date</p>

…as well as equivalent #fields.hasGlobalErrors() and #fields.globalErrors() convenience methods:

<div th:if="${#fields.hasGlobalErrors()}">
  <p th:each="err : ${#fields.globalErrors()}" th:text="${err}">...</p>
</div>

Errors ausserhalb einer form darstellen

Form validation errors can also be displayed outside forms by using variable ( ${...} ) instead of selection ( *{...} )

<div th:errors="${myForm}">...</div>
<div th:errors="${myForm.date}">...</div>
<div th:errors="${myForm.*}">...</div>
<div th:if="${#fields.hasErrors('${myForm}')}">...</div>
<div th:if="${#fields.hasErrors('${myForm.date}')}">...</div>
<div th:if="${#fields.hasErrors('${myForm.*}')}">...</div>
<form th:object="${myForm}">
...
</form>

Ausführliche Error-Messages

Detailierte Error-Messages mit den fieldName (String), message (String) and global (boolean) attributes können so dargestellt werden

<ul>
  <li th:each="e : ${#fields.detailedErrors()}" th:class="${e.global}? globalerr : fielderr">
    <span th:text="${e.global}? '*' : ${e.fieldName}">The field name</span> |
    <span th:text="${e.message}">The error message</span>
  </li>
</ul>