如何将错误绑定到百万美元页面中的字段

Question

我有一个简单的“用户注册”页面，其中包含“用户名”字段以及其他字段。我的要求是'用户名'不应该是重复的，为此我写了一个ajax函数，检查用户名是否重复，如果它是重复的，它会在'username'字段下面打印一条错误消息，这个流程工作正常，出现问题当我点击提交按钮，即使使用'用户名不唯一'消息，我也可以保存页面[虽然我可以捕获异常并相应地处理它]。我知道这种情况正在发生，因为我只是显示错误消息而不是将错误绑定到'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);
        }
    });
}  

2. Thymelaf霜冻

<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

“如何将错误消息绑定到用户名字段（如果出现用户名重复错误），以便在删除此错误之前不提交页面？”

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

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