Lavorare con attributi HTML personalizzati in Thymeleaf

1. Panoramica

In questo tutorial, vediamo come possiamo definire attributi personalizzati nei tag HTML5 utilizzando Thymeleaf. È un framework del motore di modelli che consente di utilizzare HTML semplice per visualizzare dati dinamici.

Per un articolo introduttivo su Thymeleaf o sulla sua integrazione con Spring fare riferimento a questo link.

2. Attributi personalizzati in HTML5

A volte potremmo richiedere informazioni aggiuntive nelle pagine HTML per eseguire alcune elaborazioni sul lato client. Ad esempio, potremmo voler salvare dati aggiuntivi nei tag di input del modulo in modo da poterli utilizzare durante l'invio del modulo utilizzando AJAX.

Allo stesso modo, potremmo voler visualizzare messaggi di errore di convalida personalizzati a un utente che compila un modulo.

In ogni caso, possiamo fornire questi dati aggiuntivi utilizzando gli attributi personalizzati di HTML 5. Gli attributi personalizzati possono essere definiti in un tag HTML usando il Data- prefisso.

Ora, vediamo come possiamo definire questi attributi usando il dialetto predefinito in Thymeleaf.

3. Attributi HTML personalizzati in Thymeleaf

Possiamo specificare un attributo personalizzato in un tag HTML utilizzando la sintassi:

th:data-=""

Creiamo un semplice modulo che consenta a uno studente di registrarsi a un corso per vedere le cose in azione:


    

Questo modulo contiene un unico menu a discesa con i corsi disponibili e un pulsante di invio.

Supponiamo di voler mostrare un messaggio di errore personalizzato all'utente se fa clic su invia senza selezionare un corso.

Possiamo salvare il messaggio di errore come attributo personalizzato nel tag select e creare una funzione JavaScript per convalidarne il valore al momento dell'invio del modulo.

Il tag di selezione aggiornato ha un aspetto simile a questo:

Qui stiamo recuperando il messaggio di errore dal bundle di risorse.

Ora, quando l'utente invia il modulo senza selezionare un'opzione valida, questa funzione JavaScript mostrerà un messaggio di errore all'utente:

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

Allo stesso modo, possiamo aggiungere più attributi personalizzati ai tag HTML definendo l' attributo th: data- * per ciascuno di essi.

3. Conclusione

In questo breve articolo, abbiamo esplorato come possiamo sfruttare il supporto di Thymeleaf per aggiungere attributi personalizzati nei modelli HTML5.

Come sempre una versione funzionante di questo codice è disponibile su Github.