Arbeiten mit benutzerdefinierten HTML-Attributen in Thymeleaf

1. Übersicht

In diesem Tutorial sehen wir uns an, wie wir mit Thymeleaf benutzerdefinierte Attribute in HTML5-Tags definieren können. Es handelt sich um ein Template-Engine-Framework, mit dem einfaches HTML zum Anzeigen dynamischer Daten verwendet werden kann.

Einführenden Artikel zu Thymeleaf oder seiner Integration in Spring finden Sie unter diesem Link.

2. Benutzerdefinierte Attribute in HTML5

Manchmal benötigen wir zusätzliche Informationen in HTML-Seiten, um die Verarbeitung auf der Clientseite durchzuführen. Zum Beispiel kann wollen wir zusätzliche Daten in speichern Form Eingabe - Tags , damit wir sie während Absenden des Formulars mit AJAX verwenden können.

Ebenso möchten wir möglicherweise benutzerdefinierte Validierungsfehlermeldungen für einen Benutzer anzeigen, der ein Formular ausfüllt.

In jedem Fall können wir diese zusätzlichen Daten mithilfe der benutzerdefinierten Attribute von HTML 5 bereitstellen. Benutzerdefinierte Attribute können in einem HTML-Tag mit dem Datenpräfix definiert werden .

Lassen Sie uns nun sehen, wie wir diese Attribute mit dem Standarddialekt in Thymeleaf definieren können.

3. Benutzerdefinierte HTML-Attribute in Thymeleaf

Wir können ein benutzerdefiniertes Attribut in einem HTML-Tag mithilfe der folgenden Syntax angeben:

th:data-=""

Erstellen wir ein einfaches Formular, mit dem sich ein Schüler für einen Kurs anmelden kann, um die Dinge in Aktion zu sehen:


    

Dieses Formular enthält eine einzelne Dropdown-Liste mit den verfügbaren Kursen und eine Schaltfläche zum Senden.

Angenommen, wir möchten dem Benutzer eine benutzerdefinierte Fehlermeldung anzeigen, wenn er auf "Senden" klickt, ohne einen Kurs auszuwählen.

Wir können die Fehlermeldung als benutzerdefiniertes Attribut im Auswahl- Tag speichern und eine JavaScript-Funktion erstellen, um ihren Wert beim Senden des Formulars zu überprüfen.

Das aktualisierte Auswahl- Tag sieht ungefähr so ​​aus:

Hier rufen wir die Fehlermeldung aus dem Ressourcenpaket ab.

Wenn der Benutzer das Formular absendet, ohne eine gültige Option auszuwählen, zeigt diese JavaScript-Funktion dem Benutzer eine Fehlermeldung an:

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; }

In ähnlicher Weise können wir HTML-Tags mehrere benutzerdefinierte Attribute hinzufügen, indem wir für jedes das Attribut th: data- * definieren .

3. Fazit

In diesem kurzen Artikel haben wir untersucht, wie wir die Unterstützung von Thymeleaf nutzen können, um benutzerdefinierte Attribute in HTML5-Vorlagen hinzuzufügen.

Wie immer ist eine funktionierende Version dieses Codes über Github verfügbar.