Question

使用Symfony 3.2＆amp;＆amp;关于Ubuntu 16.04的PhpStorm.2016.3.2

我有一个问题，我在这个树枝形式的电话号码字段中部分解决了。

我使用materialize作为此项目的框架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 %}。

在您目前的代码中，当任何一个字段发生错误时，会在您的所有字段和浏览器集上设置自动对焦并滚动到第一个字段。

表单上的锚点错误 - Symfony3 / Materialize

1 个答案: