1. Обзор
В этом руководстве мы рассмотрим, как мы можем определить пользовательские атрибуты в тегах HTML5 с помощью Thymeleaf. Это структура механизма шаблонов, которая позволяет использовать простой HTML для отображения динамических данных.
Вводную статью о Thymeleaf или его интеграции со Spring можно найти по этой ссылке.
2. Пользовательские атрибуты в HTML5
Иногда нам может потребоваться дополнительная информация на HTML-страницах для обработки на стороне клиента. Например, мы можем захотеть сохранить дополнительные данные в тегах ввода формы , чтобы мы могли использовать их при отправке формы с помощью AJAX. ``
Точно так же мы можем захотеть отображать пользовательские сообщения об ошибках проверки для пользователя, заполняющего форму.
В любом случае мы можем предоставить эти дополнительные данные, используя пользовательские атрибуты HTML 5. Пользовательские атрибуты могут быть определены в HTML-теге с использованием префикса data- .
Теперь давайте посмотрим, как мы можем определить эти атрибуты, используя диалект по умолчанию в Thymeleaf.
3. Пользовательские атрибуты HTML в Thymeleaf
Мы можем указать пользовательский атрибут в теге HTML, используя синтаксис:
th:data-<attribute_name>=""
Давайте создадим простую форму, которая позволит студенту зарегистрироваться на курс, чтобы увидеть вещи в действии:
<form action="#" th:action="@{/registerCourse}" th:object="${course}"
method="post" onsubmit="return validateForm();">
<span id="errormesg" style="color: red"></span> <span
style="font-weight: bold" th:text="${successMessage}"></span>
<table>
<tr>
<td>
<label th:text="#{msg.courseName}+': '"></label>
</td>
<td>
<select id="course" th:field="*{name}">
<option th:value="''" th:text="'Select'"></option>
<option th:value="'Mathematics'" th:text="'Mathematics'"></option>
<option th:value="'History'" th:text="'History'"></option>
</select></td>
</tr>
<tr>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
Эта форма содержит один раскрывающийся список с доступными курсами и кнопку отправки.
Допустим, мы хотим показать пользователю пользовательское сообщение об ошибке, если он нажмет кнопку «Отправить», не выбрав курс.
Мы можем сохранить сообщение об ошибке в качестве пользовательского атрибута в теге select и создать функцию JavaScript для проверки его значения при отправке формы.
Обновленный тег select выглядит примерно так:
<select id="course" th:field="*{name}" th:data-validation-message="#{msg.courseName.mandatory}">
Здесь мы получаем сообщение об ошибке из пакета ресурсов.
Теперь, когда пользователь отправляет форму, не выбрав допустимую опцию, эта функция JavaScript отобразит пользователю сообщение об ошибке:
function validateForm() {
var e = document.getElementById("course");
var value = e.options[e.selectedIndex].value;
if (value == '') {
var error = document.getElementById("errormesg");
error.textContent = e.getAttribute('data-validation-message');
return false;
}
return true;
}
Точно так же мы можем добавить несколько пользовательских атрибутов в теги HTML, определив атрибут th:data-* для каждого из них.
3. Заключение
В этой быстрой статье мы рассмотрели, как мы можем использовать поддержку Thymeleaf для добавления пользовательских атрибутов в шаблоны HTML5.
Как всегда, рабочая версия этого кода доступна на Github .