Personnaliser les erreurs des formulaire dans twig

Si vous manipulez les formulaires avec symfony2 vous avez sans doute testé les validations et les messages d’erreurs.

Cela fonctionne très bien et je vous conseille la lecture de la doc officielle à ce sujet.

Pour afficher les erreurs la doc vous dit d’utiliser le code suivant:


{{ form_errors(form.age) }}

Le problème c’est que lorsqu’on affiche notre template on se retrouve avec ce code HTML:


<ul>
<li>
Texte de l'erreur
</li>
</ul>

Ca fonctionne mais ce n’est pas évident à manipuler vu qu’il n’y a pas de classe CSS appliquée ni au LI ni au UL

Voici donc comment faire pour ajouter une classe (et même plus) à vos messages d’erreurs.

Tout d’abord créez le fichier « src/Acme/DemoBundle/Resources/views/Form/error.html.twig » et ajoutez-y le code suivant:


{% block field_errors %}
{% spaceless %}
{% if errors|length > 0 %}
<ul class="error_list">
{% for error in errors %}
<li>{{ error.messageTemplate|trans(error.messageParameters, 'validators') }}</li>
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock field_errors %}

Puis dans le template qui affiche votre formulaire ajoutez ceci:


{% form_theme form 'AcmeDemoBundle:Form:error.html.twig' %}

Voila désormais lorsque vous appellerez {{ form_errors(form.age) }} c’est ce template qui sera utilisé.
Vous avez désormais accès aux erreurs via la classe « error_list ». Mais si vous le désirez vous pouvez modifier complètement ce template pour afficher vos erreurs dans des « span » par exemple.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *