Utilisation d'attributs HTML personnalisés dans Thymeleaf
1. Vue d'ensemble
Dans ce didacticiel, nous examinons comment définir des attributs personnalisés dans les balises HTML5 à l'aide de Thymeleaf. C'est un framework de moteur de template qui permet d'utiliser du HTML simple pour afficher des données dynamiques.
Pour un article d'introduction sur Thymeleaf ou son intégration avec Spring, reportez-vous à celink.
2. Attributs personnalisés en HTML5
Parfois, nous pouvons avoir besoin d’informations supplémentaires dans les pages HTML pour effectuer certains traitements côté client. Par exemple, nous pouvons vouloir enregistrer des données supplémentaires dans les balisesforminput afin de pouvoir les utiliser lors de la soumission du formulaire en utilisant 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,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.
Voyons maintenant comment nous pouvons définir ces attributs à l'aide du 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 un seul menu déroulant avec les cours disponibles et un bouton de soumission.
Supposons que nous souhaitons 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 baliseselect et créer une fonction JavaScript pour valider sa valeur lors de la soumission du formulaire.
La baliseselect 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 affiche un message d'erreur à l'intention de 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'attributth:data-* pour chacun d'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 disponibleover on Github.