ThymeleafでのカスタムHTML属性の使用
1. 概要
このチュートリアルでは、Thymeleafを使用してHTML5タグでカスタム属性を定義する方法について説明します。 これは、プレーンHTMLを使用して動的データを表示できるテンプレートエンジンフレームワークです。
ThymeleafまたはSpringとの統合に関する紹介記事については、このlink.を参照してください。
2. HTML5のカスタム属性
クライアント側で何らかの処理を行うために、HTMLページに追加情報が必要になる場合があります。 たとえば、追加のデータをforminputタグに保存して、AJAXを使用してフォームを送信するときにそれらを使用できるようにすることができます。
同様に、フォームに入力するユーザーにカスタム検証エラーメッセージを表示することもできます。
いずれにせよ、we can supply this additional data by using HTML 5’s custom attributes. Custom attributes can be defined in an HTML tag using the data- prefix.
それでは、Thymeleafのデフォルトの方言を使用してこれらの属性を定義する方法を見てみましょう。
3. ThymeleafのカスタムHTML属性
次の構文を使用して、HTMLタグにカスタム属性を指定できます。
th:data-="" 学生がコースに登録して実際の様子を確認できる簡単なフォームを作成しましょう。
このフォームには、利用可能なコースと送信ボタンを含む単一のドロップダウンが含まれています。
ユーザーがコースを選択せずに送信をクリックした場合に、カスタムエラーメッセージをユーザーに表示するとします。
エラーメッセージをカスタム属性としてselectタグに保存し、フォームの送信時にその値を検証するJavaScript関数を作成できます。
更新されたselectタグは次のようになります。
ここでは、リソースバンドルからエラーメッセージを取得しています。
現在、ユーザーが有効なオプションを選択せずにフォームを送信すると、この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-*属性を定義することで、HTMLタグに複数のカスタム属性を追加できます。
3. 結論
この簡単な記事では、Thymeleafのサポートを活用してHTML5テンプレートにカスタム属性を追加する方法について説明しました。
いつものように、このコードの動作バージョンはover on Githubで利用できます。