Expand Authors Top

If you have a few years of experience in the Java ecosystem and you’d like to share that with the community, have a look at our Contribution Guidelines.

Expanded Audience – Frontegg – Security (partner)
announcement - icon User management is very complex, when implemented properly. No surprise here.

Not having to roll all of that out manually, but instead integrating a mature, fully-fledged solution - yeah, that makes a lot of sense.
That's basically what Frontegg is - User Management for your application. It's focused on making your app scalable, secure and enjoyable for your users.
From signup to authentication, it supports simple scenarios all the way to complex and custom application logic.

Have a look:

>> Elegant User Management, Tailor-made for B2B SaaS

Generic Top

Get started with Spring 5 and Spring Boot 2, through the Learn Spring course:


1. Overview

In this tutorial, we look at how we can define custom attributes in HTML5 tags using Thymeleaf. It is a template engine framework which allows plain HTML to be used to display dynamic data.

For an introductory article on Thymeleaf or its integration with Spring refer to this link.

2. Custom Attributes in HTML5

Sometimes we may require extra information in HTML pages to do some processing on the client-side. For instance, we may want to save additional data in form input tags so that we can use them while submitting the form using AJAX.

Likewise, we may want to display custom validation error messages to a user filling a form.

In any case, 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.

Now, let's see how we can define these attributes using the default dialect in Thymeleaf.

3. Custom HTML Attributes in Thymeleaf

We can specify a custom attribute in an HTML tag using the syntax:


Let's create a simple form which allows a student to register for a course to see things in action:

<form action="#" th:action="@{/registerCourse}" th:object="${course}"
    method="post" onsubmit="return validateForm();">
    <span id="errormesg" style="color: red"></span> <span
      style="font-weight: bold" th:text="${successMessage}"></span>
                <label th:text="#{msg.courseName}+': '"></label>
                <select id="course" th:field="*{name}">
                    <option th:value="''" th:text="'Select'"></option>
                    <option th:value="'Mathematics'" th:text="'Mathematics'"></option>
                    <option th:value="'History'" th:text="'History'"></option>
            <td><input type="submit" value="Submit" /></td>

This form contains a single dropdown with the available courses and a submit button.

Let's say we want to show a custom error message to the user if they click on submit without selecting a course.

We can save the error message as a custom attribute in the select tag and create a JavaScript function to validate its value on submitting the form.

The updated select tag looks something like this:

<select id="course" th:field="*{name}" th:data-validation-message="#{msg.courseName.mandatory}">

Here, we're fetching the error message from the resource bundle.

Now, when the user submits the form without selecting a valid option, this JavaScript function will display an error message to the user:

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;

Similarly, we can add multiple custom attributes to HTML tags by defining th:data-* attribute for each one of them.

3. Conclusion

In this quick article, we explored how we can leverage Thymeleaf's support to add custom attributes in HTML5 templates.

As always a working version of this code is available over on Github.

Generic bottom

Get started with Spring 5 and Spring Boot 2, through the Learn Spring course:

Generic footer banner
Comments are closed on this article!