«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.