Adding class to invalid form errors in symfony2

Question

I want to customize the error handling in symfony2 forms. If a error occured, the input field should have another class to show that the input value isn't correct.

How can I do this? I know that I have to customize the rendering template, but I don't really know how to do this. Do I have to customize all input templates? And how can I check, if the input contains errors?

Answer 1

If you don't want to use custom forms, then you can do something like this (I have Symfony 2.6 and Bootstrap 3):

    <div class="form-group {% if not form.YOUR_ELEMENT.vars.valid %}has-error{% endif %}">
        {{ form_label(form.YOUR_ELEMENT) }}
        {{ form_widget(form.YOUR_ELEMENT) }}
    </div>

Answer 2

Here is my solution with a custom form theme. I copied the standard widget_attributes block and added the code between {# ADD ERROR START #} and {# ADD ERROR END #}. You just have to replace the value in {% set errorClass = 'error' %} with your error class.

This solution adds the specified error class to all widgets with errors.

{% block widget_attributes %}
    {% spaceless %}
        {# ADD ERROR START #}
        {% if errors|length > 0 %}
            {% set errorClass = 'error' %}
            {% if attr.class is defined %}
                {% set errorClass = errorClass ~ ' ' ~ attr.class %}
            {% endif %}
            {% set attr = attr|merge({'class': errorClass}) %}
        {% endif %}
        {# ADD ERROR END #}
        id="{{ id }}" name="{{ full_name }}"
        {%- if read_only %} readonly="readonly"{% endif -%}
        {%- if disabled %} disabled="disabled"{% endif -%}
        {%- if required %} required="required"{% endif -%}
        {%- if max_length %} maxlength="{{ max_length }}"{% endif -%}
        {%- if pattern %} pattern="{{ pattern }}"{% endif -%}
        {%- for attrname, attrvalue in attr -%}
            {{- " " -}}
            {%- if attrname in ['placeholder', 'title'] -%}
                {{- attrname }}="{{ attrvalue|trans({}, translation_domain) }}"
            {%- elseif attrvalue is sameas(true) -%}
                {{- attrname }}="{{ attrname }}"
            {%- elseif attrvalue is not sameas(false) -%}
                {{- attrname }}="{{ attrvalue }}"
            {%- endif -%}
        {%- endfor -%}
    {% endspaceless %}
{% endblock widget_attributes %}

Answer 3

You could use form themes and override default theme. Ex. See how MopaBootstrapBundle theme apply exactly you want using the Twitter Bootstrap philosophy.

Answer 4

As said use form theming. You can use the parent() macro to avoid duplicating code:

{%- block widget_attributes -%}
    {% if errors|length > 0 %}
        {% set _class = 'has-error' %}
        {% if attr.class is defined %}
           {% set _class = _class ~ ' ' ~ attr.class|trim %}
        {% endif %}
        {% set attr = attr|merge({'class': _class}) %}
    {% endif %}
    {{- parent() -}}
{%- endblock widget_attributes -%}