symfony:如何在屏幕上放置表单错误 - symfony: How to place the screen on the form error?

symfony: How to place the screen on the form error?

本文关键字：表单错误屏幕 symfony | 更新日期: 2023-09-26

我的一些网页很长，在页面底部有一个表单。当发送一个验证失败的表单时，我被带回到页面的顶部，这不是很用户友好。

我想找到一种方法，在错误之后，将滚动条放置在错误上，或者至少在表单的顶部。

有谁知道控制这个的方法吗?

我做到了，使用javascript:

{% if not form.vars.valid %}
    window.location.hash = 'form';
{% endif %}

我认为它不太干净。你知道别的方法吗?

可以使用autofocus HTML属性。不需要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").first().offset().top - offset }, delay);
}

offset允许更好地控制你滚动到的目标元素的顶部位置(如果你的页面顶部被固定的导航栏隐藏的话很有用)，delay允许在滚动之前延迟。