Anchor Fehler auf Form - Symfony3/Materialise

Question

Mit Symfony 3.2 & & PhpStorm.2016.3.2 auf Ubuntu 16.04

Ich habe ein Problem, das ich auf dem Telefonnummernfeld in diesem Zweig Form teilweise aufgelöst.

Ich benutze materialisieren als Framework css für dieses Projekt und ich benutze die Form dieses Frameworks.

Ich möchte in der Lage sein, die Ansicht direkt auf dem Formular zu verankern, nachdem ein Fehler entdeckt wurde. Bis jetzt funktioniert es gut mit der Telefonnummer Abschnitt, aber jeder andere funktioniert nicht. Ich habe versucht, meinen Code so viel wie möglich zu optimieren, aber ich kann meine Sicht auf andere Felder, die einen Fehler erhalten, nicht verankern. Es ist ziemlich frustrierend.

hier ist die Form Zweig in der Ansicht

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

und hier das Formular-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.' 
        ) 
       )), 
      )) 

hat jemand eine Idee?

Answer 1

Sie überprüfen, ob das ganze Formular die Fehler {% if form.vars.errors|length %} gesetzt hat, aber Sie sollten überprüfen, ob das spezifische Feld einen Fehler {% if form.field_name.vars.errors|length %} hat.

Wenn in Ihrem aktuellen Code ein Fehler in einem der Felder auftritt, wird der Autofokus für alle Ihre Felder und Browsergruppen festgelegt und blättert zum ersten.