如何将错误绑定到 thymeleaf 页面中的字段

Question

我有一个简单的 'user registration' 页面，其中包含 'username' 字段和其他字段。我的要求是 'username' 不应该重复，为此我写了一个 ajax 函数来检查用户名是否重复，如果重复则在 'username' 字段下方打印一条错误消息，这个流程工作正常，当我点击提交按钮时出现问题，即使有 'username not unique' 消息我也能够保存页面 [尽管我可以捕获异常并相应地处理它]。我知道这是因为我只是显示错误消息而不是将错误绑定到 'username' 字段。如何将错误消息绑定到用户名字段（如果出现用户名重复错误），以便在删除此错误之前不会提交该页面？

代码如下

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 页面

<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>```

Answer 1

"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?"

您必须了解 Thymeleaf 模板是在服务器端处理的 因此您首先必须提交页面才能找回错误。但这并不意味着您不能添加一些不错的功能来拥有您正在尝试的功能，并且让两个世界一起工作以获得更好的用户体验。

在第一次迭代中，我将首先使用 Thymeleaf 和 Spring MVC 实现一个注册页面，而不涉及任何 JS 代码。表单应该有自己的验证注释，如果需要的话还可以自定义，我会通过标准的 BindingResult 将它们触发回视图。因此，当您提交无效表单时，您会执行服务器端发生的标准错误处理，并且您从服务器收到返回给客户端的页面，该页面已经包含 html 以及您呈现的错误你已经做到了。
因此，在您的第一次迭代之后，您决定要通过此 jQuery AJAX 调用验证用户名，这将在提交之前通知用户他的用户名已经存在用过的。你可以做到，但你要承担这个流程的全部责任。所以现在我们处于用户看到错误并且他还可以单击提交表单的状态。如果他这样做，那么服务器也将返回一个包含验证的页面，所以我们可以说这是可以接受的。您可以通过禁用提交按钮来改进它，以防仍然存在验证错误的字段，但您必须再次通过一些 JS 代码执行此操作。

如何将错误绑定到 thymeleaf 页面中的字段

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

spring-boot

thymeleaf

bean-validation