Utilisation d'attributs HTML personnalisés dans Thymeleaf

1. Vue d'ensemble

Dans ce didacticiel, nous examinons comment nous pouvons définir des attributs personnalisés dans les balises HTML5 à l'aide de Thymeleaf. Il s'agit d'un cadre de moteur de modèle qui permet d'utiliser du HTML brut pour afficher des données dynamiques.

Pour un article d'introduction sur Thymeleaf ou son intégration avec Spring, reportez-vous à ce lien.

2. Attributs personnalisés en HTML5

Parfois, nous pouvons avoir besoin d'informations supplémentaires dans les pages HTML pour effectuer un traitement côté client. Par exemple, nous pouvons souhaiter enregistrer des données supplémentaires dans des balises d' entrée de formulaire afin de pouvoir les utiliser lors de la soumission du formulaire à l'aide d'AJAX.

De même, nous pouvons souhaiter afficher des messages d'erreur de validation personnalisés à un utilisateur remplissant un formulaire.

Dans tous les cas, nous pouvons fournir ces données supplémentaires en utilisant les attributs personnalisés de HTML 5. Les attributs personnalisés peuvent être définis dans une balise HTML à l'aide du préfixe de données .

Voyons maintenant comment nous pouvons définir ces attributs en utilisant le dialecte par défaut de Thymeleaf.

3. Attributs HTML personnalisés dans Thymeleaf

Nous pouvons spécifier un attribut personnalisé dans une balise HTML en utilisant la syntaxe:

th:data-=""

Créons un formulaire simple qui permet à un étudiant de s'inscrire à un cours pour voir les choses en action:


    

Ce formulaire contient une liste déroulante unique avec les cours disponibles et un bouton d'envoi.

Disons que nous voulons afficher un message d'erreur personnalisé à l'utilisateur s'il clique sur Soumettre sans sélectionner de cours.

Nous pouvons enregistrer le message d'erreur en tant qu'attribut personnalisé dans la balise select et créer une fonction JavaScript pour valider sa valeur lors de la soumission du formulaire.

La balise de sélection mise à jour ressemble à ceci:

Ici, nous récupérons le message d'erreur du groupe de ressources.

Désormais, lorsque l'utilisateur soumet le formulaire sans sélectionner une option valide, cette fonction JavaScript affichera un message d'erreur à l'utilisateur:

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

De même, nous pouvons ajouter plusieurs attributs personnalisés aux balises HTML en définissant l' attribut th: data- * pour chacun d'entre eux.

3. Conclusion

Dans cet article rapide, nous avons exploré comment nous pouvons tirer parti de la prise en charge de Thymeleaf pour ajouter des attributs personnalisés dans les modèles HTML5.

Comme toujours, une version fonctionnelle de ce code est disponible sur Github.