Question

我有一个简单的“用户注册”页面，其中包含“用户名”字段以及其他字段。我的要求是“用户名”不应重复，为此，我编写了一个ajax函数来检查用户名是否重复，如果重复，则在“用户名”字段下方显示错误消息，此流程运行正常，出现问题当我单击“提交”按钮时，即使显示“用户名不是唯一的”消息，我也可以保存页面[尽管我可以捕获异常并进行相应处理]。我知道这种情况正在发生，因为我只是显示错误消息，而不是将错误绑定到“用户名”字段。如何将错误消息绑定到用户名字段（如果用户名重复错误），以便在删除此错误之前不提交该页面？

代码在下面

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

胸腺页面

<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模板是在服务器端处理的，因此，您首先必须提交页面以获取错误。但这并不意味着您无法添加一些功能来拥有您想要的功能，并且让两个世界协同工作以提供更好的用户体验。

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

如何将错误绑定到百里香页内的字段

1 个答案: