Anchor error on form - Symfony3/Materialize - forms

Question

Using Symfony 3.2 && PhpStorm.2016.3.2 on Ubuntu 16.04
I have a problem that I partially resolved on the phone number field in this twig form.
I use materialize as the framework css for this project and I use the form of this framework.
I would like to be able to anchor the view directly on the form after an error has been spotted. So far it works great with the phone number section but anyone else doesn't work. I tried to tweak my code as much as I can but still I cannot anchor my view on other fields that get an error. It is pretty much frustrating.
here is the form twig in the view
<form class="col m12" method="POST">
{{ form_start(form) }}
<div class="row" id="radio-button-block">
<div class="col m12">
{{ form_row(form.baptismChoice) }}
</div>
</div>
<div class="row">
<div class="input-field col s6 validate" id="last_name" type="text">
{% if form.vars.errors|length %}
{{ form_row(
form.lastName,
form.lastName.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.lastName) }}
{% endif %}
</div>
<div class="input-field col s6 validate" id="first_name" type="text">
{% if form.vars.errors|length %}
{{ form_row(
form.firstName,
form.firstName.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.firstName) }}
{% endif %}
</div>
</div>
<div class="row">
<div class="input-field col s12 validate" id="email" type="email">
{{ form_row(form.authorEmail) }}
</div>
</div>
<div class="row">
<div class="input-field col s12 validate" id="icon_telephone" type="tel">
{{ form_errors(form) }}
{% if form.vars.errors|length %}
{{ form_row(
form.authorPhone,
form.authorPhone.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.authorPhone) }}
{% endif %}
</div>
</div>
<div class="row">
<div class="input-field col s12 validate" id="city" type="text">
{{ form_row(form.city) }}
</div>
</div>
<div class="row" id="comment-block">
<div class="input-field col s12">
<div id="textarea">
{{ form_row(form.comment) }}
</div>
</div>
</div>
<div class="row">
<div class="input-field col s12 center-align">
{{ form_row(form.submit) }}
</div>
</div>
{{ form_end(form) }}
</form>
and here the Form builder in FomrType.php
->add('firstName', TextType::class, array(
'label' => 'Prénom',
'required' => true,
'attr' => array(
'class' => 'validate',
'id' => 'first_name',
),
'constraints' => array(new Regex(
array(
'pattern' => "#^[a-zéèàêâùïüë' -]{2,}$#i",
'message' => 'Oops ! Ce champ n\'est pas bon.'
)
)),
))
->add('lastName', TextType::class, array('constraints' => new Regex("#^[a-zéèàêâùïüë' -]{2,}$#i"),
'label' => 'Nom',
'required' => true,
'attr' => array(
'class' => 'validate',
'id' => 'last_name',
),
))
->add('authorEmail', EmailType::class, array('label' => 'Adresse mail',
'required' => true,
'attr' => array(
'class' => 'validate',
'if' => 'email'
),
))
->add('authorPhone', TextType::class, array(
'label' => 'Numéro de téléphone',
'required' => true,
'error_bubbling' => true,
'attr' => array(
'class' => 'validate',
'id' => 'icon_telephone'
),
'constraints' => array(new Regex(
array(
'pattern' => '#^0[1-9]([-. ]?[0-9]{2}){4}$#',
'message' => 'Oops ! Ce champ n\'est pas bon.'
)
)),
))
does anyone have an idea?

Answer 1

You're checking if the whole form has the errors set {% if form.vars.errors|length %}, but you should check if the specific field has an error {% if form.field_name.vars.errors|length %}.
In your present code, when an error occurs on any one of the fields, then autofocus is set on all of your fields and browser sets and scrolls to the first one.