Symfony & FOSUserBundle. Customize validation errors on register template

Question

I was trying to solve my problem: I'm not able to find where the validation errors of register_content.html.twig are defined.

I need to know how to show that errors as I would like. Nowadays my Register is looks like:

As you can see, there is a ugly validation error. I want to change the tags

<div>
 <ul><li> Las dos contraseñas no coinciden. </li></ul> 
</div>

predefined somewhere, by another.

I have overridden the view register_content.html.twig and I can to show that validation errors but not customize it.

<div>
    {{ form_errors(form.email) }}
    {{ form_errors(form.username) }}
    {{ form_errors(form.plainPassword.first) }}
    {{ form_errors(form.plainPassword.second) }}
</div>

Do you know how I can customize HTML structure of the validation errors?

For example in login_content.html.twig the validation errors are shown like this:

It is possible because in login_content.html.twig are defined the validation errors:

{% if error %}
    <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}

Answer 1

You will have to override the default symfony form error block. You can find out how to do it in the symfony documentation

you will be able to set this form theme globaly or per view as shown in the documentation

So for example if you would like to display the errors inside a div with a class alert alert-danger you would create a file views/Form/form_errors.html.twig

{% form_theme form _self %}

{# form_errors.html.twig #}
{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
        <div class='alert alert-danger'>
            {% for error in errors %}
                <div>{{ error.message }}</div>
            {% endfor %}
        </div>
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

and to use this custom theme just in the registration form you would call at the top of your override file register_content.html.twig

{% form_theme form 'Form/form_errors.html.twig' %}

Answer 2

I found the solution. I have change the {{ form_error }} variable in Twig for form.field.vars.errors.

An example, If you want to customize your email validation errors:

<div>
    {{ form_errors(form.email) }}
</div>

change it by:

{% for errorItem in form.email.vars.errors %}
    <div>{{ errorItem.message }}</div>
{% endfor %}

You could use a div tag or whatever tag you want.

Answer 3

You can use translation. In parameters.ini set locale to your language and create message file. Then in twig template use:

    {% if error %}
        <div class="error">{{ error.message|trans({},'messages') }}</div>
    {% endif %}

Another solution would be:

{{ error.message | replace({"Bad credentials." : "Invalid username or password."}) }}