Symfony 自定义表单错误 css答案

【问题标题】：Symfony Customize form errors cssSymfony 自定义表单错误 css
【发布时间】：2018-03-10 02:22:00
【问题描述】：

我使用的是 symfony 2.8。在注册表单中，当我提交带有空字段的表单时，它在

中显示验证错误

标签。它确实使 UI 看起来很糟糕。如何更改每个验证错误消息的 css。

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register','novalidate': 'novalidate'}}) }}
            <div class="form-group">
                {{ form_row(form.name) }}
            </div>
            <div class="form-group">
                {{ form_row(form.email) }}
            </div>
            <div class="form-group">
                {{ form_row(form.username) }}
            </div>
            <div class="form-group">
                {{ form_row(form.plainPassword.first) }}
            </div>
            <div class="form-group">
                {{ form_row(form.plainPassword.second) }}
            </div>
            <div>
                <input type="submit" class="btn btn-primary" value="{{ 'registration.submit'|trans }}" />
            </div>
            {{ form_end(form) }}

【问题讨论】：

标签： php html symfony validation symfony-2.8

【解决方案1】：

您正在使用 form_row 小部件呈现表单字段，该小部件呈现标签、字段和相关错误以进行自定义样式您可以单独呈现您的字段及其标签和错误，例如

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register','novalidate': 'novalidate'}}) }}

    {{ form_label(form.email) }}

    <div class="some_class">{{ form_errors(form.email) }} </div>

    {{ form_widget(form.email) }}

{{ form_end(form) }}

<style type="text/css">

.some_class{
 /* write custom styling rules here */
}

</style>

或将所有错误集中在一个地方，例如

{# render any "global" errors #}
{{ form_errors(form) }}

Reference: Twig Template Form Function and Variable Reference

【讨论】：

【解决方案2】：

错误有自己的元素和类，您可以从 CSS 中定位它们。

一种基本方法是使用here 所述的表单主题，或者您可以使用create your own form theme。

如果你想自定义它呈现的标签，你可以做这个人所做的here。

【讨论】：