Якорь ошибка формы - Symfony3/материализовать

Question

Используя Symfony 3.2 & & PhpStorm.2016.3.2 на Ubuntu 16.04

У меня есть проблема, что я частично решена на поле номера телефона в этой форме прута.

Я использую материализацию в качестве рамки css для этого проекта, и я использую форму этой структуры.

Я хотел был бы иметь возможность зафиксировать представление сразу на форме после того как ошибка была обнаружена. Пока это отлично работает с номером телефона, но никто другой не работает. Я пытался настроить мой код настолько, насколько могу, но все же я не могу привязать свой взгляд к другим полям, которые получают ошибку. Это очень неприятно.

здесь форма прут в представлении

<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> 

и здесь форма строитель в 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.' 
        ) 
       )), 
      )) 

ли кто-нибудь есть идеи?

Answer 1

Вы проверяете, есть ли у всей формы ошибки {% if form.vars.errors|length %}, но вы должны проверить, есть ли у данного поля сообщение об ошибке {% if form.field_name.vars.errors|length %}.

В вашем настоящем коде при возникновении ошибки в любом из полей, автофокусировка устанавливается во всех ваших полях и наборах браузеров и прокручивается до первого.