Как связать ошибку с полем на странице тимелист - PullRequest
Новая
       22

Как связать ошибку с полем на странице тимелист

0 голосов
/ 20 апреля 2019

У меня есть простая страница «Регистрация пользователя» с полем «Имя пользователя» и другими полями.Мое требование: «имя пользователя» не должно дублироваться, для этого я написал функцию ajax, которая проверяет, является ли имя пользователя дубликатом, и, если он дублируется, он печатает сообщение об ошибке ниже поля «имя пользователя», этот поток работает нормально, проблема возникаеткогда я нажимаю кнопку «отправить», даже с сообщением «имя пользователя не уникально» я могу сохранить страницу [хотя я могу перехватить исключение и обработать его соответствующим образом].Я знаю, что это происходит, потому что я просто отображаю сообщение об ошибке, а не привязываю ошибку к полю '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>```

1 Ответ

0 голосов
/ 20 апреля 2019

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

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

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

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

...