How to bind an error to a field from within a thymeleaf page

Question

I have a simple 'user registration' page with a 'username' field along with other fields. My requirement is 'username' should not be duplicate, for this I have written a ajax function which checks if username is duplicate and if it is duplicate it prints an error message below the 'username' field, this flow is working fine, problem occurs when I click on submit button, even with the 'username not unique' message i am able to save the page [although i can catch exception and handle it accordingly]. I know this is happening because i am just displaying the error message and not binding error to 'username' field. How can I bind error message to username field(in case of username duplicate error) so that page is not submitted until this error is removed?

Code is below

1.JQuery

function check_username(){
$("#usernamentavlberror").empty();
var developerData = {};
developerData["userName"] = $("#username").val();
$.ajax({
        type: 'POST',
        contentType : "application/json",
        url: '/checkForDuplicateUsername',
        data : JSON.stringify(developerData),
        dataType : 'json',
        success: function(data){
            if(data == "userNameExists"){
                alert("inside user")
                $("#usernamentavlberror").html("UserName Not Available");
            }
            else {
                 //do perform other actions like displaying error messages etc.,
            }
        },
        error : function(data) {
            alert("error---"+data);
        }
    });
}

Thymeleaf page

<form action="#" th:action="@{/signup}" th:object="${user}" method=post>
    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"> <i class="fa fa-user"></i>
            </span>
        </div>
        <input name="username" th:field="*{username}" class="form-control" placeholder="User Name" type="text" id="username">
    </div>
    <div class="form-group input-group" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
    <div class="form-group input-group" id="usernamentavlberror"></div>

                .
                .
</form>```

score 0 · Accepted Answer · answered Apr 20 '19 at 07:37

"How can I bind error message to username field(in case of username duplicate error) so that page is not submitted until this error is removed?"

You have to understand that Thymeleaf templates are processed on the server side so you first have to submit the page to be able to get back the errors. But this doesn't mean you cannot add some nice to have features like the one you're trying to and have both worlds working together for a better user experience.

In the first iteration I would have first implemented a signup page with Thymeleaf and Spring MVC without involving any JS code. The form should have its own validation annotations, and custom ones if needed and I would have triggered them back to the view via the standard BindingResult. So when you submit an invalid form you do the standard error handling which is happening on the server side and from the server you receive back to the client a page which already contains the html with the errors in it which you render as you already did.
So after your first iteration you decided you want to validate the username via this jQuery AJAX call which will inform the user even before the submit that his username is already used. You can do it but then you take the whole responsibility of this flow. So now we are in a state where the user is seeing the error and he's also able to click on the submit form. If he does it then the server will also respond back with a page which has the validations in it so this is let's say acceptable. You can improve it by disabling the submit button in case there are still fields with validation errors but you have to do this via some JS code again.

How to bind an error to a field from within a thymeleaf page

1 Answers1