ThymeleafでのカスタムHTML属性の操作

投稿日: 2019-10-18 2022-10-12
タグ: Spring MVC, Thymeleaf

1. 概要

このチュートリアルでは、Thymeleafを使用してHTML5タグでカスタム属性を定義する方法を見ていきます。これは、プレーンHTMLを使用して動的データを表示できるようにするテンプレートエンジンフレームワークです。

ThymeleafまたはSpringとの統合に関する紹介記事については、このリンクを参照してください。

2. HTML5のカスタム属性

クライアント側で処理を行うために、HTMLページに追加情報が必要になる場合があります。たとえば、 form input タグに追加のデータを保存して、AJAXを使用してフォームを送信するときにそれらを使用できるようにすることができます。

同様に、フォームに入力するユーザーにカスタム検証エラーメッセージを表示したい場合があります。

いかなる場合でも、 HTML 5のカスタム属性を使用して、この追加データを提供できます。カスタム属性は、data-prefixを使用してHTMLタグで定義できます。

それでは、Thymeleafのデフォルトの方言を使用してこれらの属性を定義する方法を見てみましょう。

3. ThymeleafのカスタムHTML属性

次の構文を使用して、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>

このフォームには、利用可能なコースと送信ボタンを含む1つのドロップダウンが含まれています。

ユーザーがコースを選択せずに送信をクリックした場合に、カスタムエラーメッセージを表示したいとします。

エラーメッセージをカスタム属性として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で利用できます。

getdocs

13036