Symfony 自定义表单错误 css

Question

我正在使用 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) }}

Answer 1

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

一种基本方法可以使用 here, or you could create your own form theme 所述的表单主题。

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

Answer 2

您正在使用 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

Symfony 自定义表单错误 css

Symfony Customize form errors css

html

php

validation

symfony

symfony-2.8