Некоторые из моих веб-страниц очень длинны и имеют форму внизу страницы. После отправки формы, которая не проходит проверку, я вернусь в начало страницы, что не очень удобно.
Я хотел бы найти способ, по ошибке, поместить прокрутку по ошибке или по крайней мере в верхней части формы.
Кто-нибудь знает, как управлять этим?
Я сделал, используя javascript:
{% if not form.vars.valid %} window.location.hash = 'form'; {% endif %} Я не думаю, что это очень чисто. Знаете ли вы по-другому?
Вы можете использовать атрибут HTML autofocus . Для этого JavaScript не нужен.
<input type="text" name="field_name" autofocus>
Атрибут можно добавить следующим образом:
{{ form_row(form.field_name, {'attr': {'autofocus': null}}) }}
Простая реализация, проверяющая полевую ошибку, может выглядеть так:
{% if form.field_name.vars.errors|length %} {{ form_row( form.field_name, form.field_name.vars|merge({'attr': {'autofocus': null}}) ) }} {% else %} {{ form_row(form.field_name) }} {% endif %}
Если вы не хотите добавлять код в каждое из полей и нуждаетесь в более быстром и более общем решении, этот небольшой скрипт выполнит эту работу (протестирован с помощью Symfony3):
var delay = 0; var offset = 150; if ($('body').find("span").hasClass('help-block')) { $('html, body').animate({scrollTop: $($(".help-block")[0]).offset().top - offset }, delay); }
offset позволяет лучше контролировать верхнее положение целевого элемента, к которому вы прокручиваете (полезно, если верх страницы скрыт фиксированной навигационной панелью), а задержка позволяет задержать перед прокруткой.