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?
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>
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 %}
You could use form themes and override default theme. Ex. See how MopaBootstrapBundle theme apply exactly you want using the Twitter Bootstrap philosophy.
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 -%}
