как установить фокус для элементов в приложении на основе Spring

У меня есть приложение spring, в котором я проверяю все проверки в пользовательском классе весеннего валидатора.

В моей форме почти 15 полей. Если в последнем поле есть ошибка, как установить фокус на этот элемент.

Поддерживают ли весенние теги это. Есть технические идеи? В настоящее время я отображаю свои сообщения об ошибках рядом с самими полями.


user-interface spring-mvc validation forms custom-errors
person Sekhar    schedule 28.02.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Можно использовать тег spring:bind, чтобы определить, является ли поле или весь объект модели имеет ошибку и общий статус объекта после обработки (отправки).

<spring:bind path="user.username">
    <input id="inputId" type="text" name="${status.expression}" value="${status.value}"/>
    <c:if test="${status.error}">
        <c:forEach items="${status.errorMessages}" var"error">
            <span class="field-error">${error}</span>
        </c:forEach>
        <script type="text/javascript">
            document.getElementById('inputId').focus();
        </script>
    </c:if>
</spring:bind>

Примечание.

  • Переменная status представлена ​​тегом spring:bind.
  • Часть javascript будет фокусировать элемент, когда в конкретном поле есть ошибки проверки.
person Maxim Manco    schedule 28.02.2012

arrow_upward
1
arrow_downward

Вы можете установить автофокус для всех полей, в которых есть ошибка, но ваш браузер будет автоматически фокусироваться (и прокручиваться) только до первого.

<spring:bind path="someFieldName">
  <input type="text" name="someFieldName" value="${status.value}" ${status.error?'autofocus="autofocus"':''} />
</spring:bind>

Вы не можете использовать здесь Spring <form:input />, так как он не работает с условными атрибутами.

person Neil McGuigan    schedule 18.02.2015

arrow_upward
0
arrow_downward

Я использовал это:

    <spring:bind path="*">
        <c:if test="${status.error}"> 
            <script type="text/javascript">
                window.onload = function(){
                    document.getElementById('${status.errors.fieldErrors[0].field}').focus();
                };
            </script>  
        </c:if>
    </spring:bind>

Если есть ошибка, он найдет первое fieldError и его идентификатор и установит фокус на этом элементе.

забыл сказать, что прелесть в том, что вам не нужно помещать этот код рядом с каждым вводом. Одного раза достаточно для jsp

person Wouter Buyckx    schedule 03.03.2017