Блог

У меня есть простая страница «регистрация пользователя» с полем «имя пользователя» и другими полями. Мое требование — «имя пользователя» не должно дублироваться, для этого я написал функцию 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);
        }
    });
}  
  

2. Страница 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>```
  

«Как я могу привязать сообщение об ошибке к полю имени пользователя (в случае ошибки дублирования имени пользователя), чтобы страница не отправлялась, пока эта ошибка не будет удалена?»

Вы должны понимать, что шаблоны Thymeleaf обрабатываются на стороне сервера, поэтому сначала вам нужно отправить страницу, чтобы иметь возможность возвращать ошибки. Но это не значит, что вы не можете добавить некоторые приятные функции, подобные той, которую вы пытаетесь, и заставить оба мира работать вместе для улучшения пользовательского интерфейса.

1. На первой итерации я бы сначала реализовал страницу регистрации с помощью Thymeleaf и Spring MVC без использования какого-либо JS-кода. Форма должна иметь свои собственные аннотации проверки и пользовательские, если это необходимо, и я бы вернул их обратно в представление с помощью стандартного BindingResult. Поэтому, когда вы отправляете недопустимую форму, вы выполняете стандартную обработку ошибок, которая происходит на стороне сервера, и с сервера вы получаете обратно клиенту страницу, которая уже содержит html с ошибками в нем, которые вы отображаете, как вы уже делали.

2. Итак, после вашей первой итерации вы решили, что хотите проверить имя пользователя с помощью этого вызова jQuery AJAX, который проинформирует пользователя еще до отправки, что его имя пользователя уже используется. Вы можете это сделать, но тогда вы берете на себя всю ответственность за этот поток. Итак, теперь мы находимся в состоянии, когда пользователь видит ошибку, и он также может нажать на форму отправки. Если он это сделает, сервер также ответит страницей, на которой есть проверки, так что это, скажем так, приемлемо. Вы можете улучшить это, отключив кнопку отправки на случай, если все еще есть поля с ошибками проверки, но вам придется сделать это снова с помощью некоторого JS-кода.