验证选择字段+ Symfony2中动态生成的选项

Question

我有3个下拉菜单。第一个下拉列表是可见的。在第一个下拉列表中选择一个值时，将进行ajax调用并根据所选值拉取数据，并将选项添加到可见的第二个下拉列表中。当您在第二个下拉列表中选择一个值时，第三个相同。

但问题是，现在，当我想提交表单时，我总是在第二个和第三个下拉列表中得到验证错误This value is not valid.。我有办法解决这个问题吗？或者可能在最后两个字段上禁用验证？

在我的注册表格中我有

->add('player', new PlayerType())

在我的播放器表单类型中我有

->add('team', new TeamType(), array(
      'label' => 'Team*',
      'required' => false
))

在我的TeamType中我有

$builder
        ->add('competition', new CompetitionType())
        ->add('teamName', 'choice', array(
            'empty_value' => 'Kies uw competitie.',
            'label' => 'Team'
        ))
    ;

在CompetitionType中我有：

$builder
        ->add('region', 'entity', [
            'label'    => 'Regio',
            'class'    => 'VolleyScoutBundle:Regions',
            'property' => 'regionName',
            'empty_value' => 'Kies uw regio.'
        ])
        ->add('competitionName', 'choice', array(
            'empty_value' => 'Kies uw competitie.',
            'label' => 'Competitie'
        ))
    ;

我在competitionName和teamName上遇到错误。我在jquery中加载数据如下：

$('#register_player_team_competition_region').on('change', function() {
    var region_id = this.value;
    $.ajax({
        url: getCompetitonsUrl,
        data: {
            regionid: region_id
        },
        success: function( data ) {
            $(data).each(function( index, val ) {
                $('#register_player_team_competition_competitionName').append("<option value='" + val.value + "'>" + val.label + "</option>");
                $('#register_player_team_competition_competitionName').trigger("chosen:updated");
                $('.competition').removeClass('hide');
                $('.competition').css('display', 'block');
            });
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    })
});

$('#register_player_team_competition_competitionName').on('change', function() {
    var competition_id = this.value;
    $.ajax({
        url: getTeamsUrl,
        data: {
            competitionid : competition_id
        },
        success: function( data ) {
            console.log(data);
            $(data).each(function( index, val ) {
                $('#register_player_team_teamName').append("<option value='" + val.value + "'>" + val.label + "</option>");
                $('#register_player_team_teamName').trigger("chosen:updated");
                $('.team').removeClass('hide');
                $('.team').css('display', 'block');
            });
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    })
});

我的注册视图：

{% extends "::securitybase.html.twig" %}

{% block title %}Register | {{ parent() }}{% endblock %}

{% block body %}
{% set class_error = ' has-error' %}
    <div class="row">
        <h1 class="col-sm-offset-3"><img src="{{ asset('bundles/volleyscout/images/volleybal.png') }}" width="40" height="40" alt=""> VolleyScout</h1>
        {{ form_start(registerForm, {"attr": {"class": "form-horizontal"} }) }}
        <fieldset>
            <legend>Personalia</legend>
            <div class="form-group{{ registerForm.userFirstname.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.userFirstname, label|default(),
                {"label_attr": {"class": "col-sm-3 control-label"} }) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.userFirstname,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.userFirstname.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.userFirstname) }}
                    </div>
                {% endif %}
            </div>
            <div class="form-group{{ registerForm.userSurname.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.userSurname, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.userSurname,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.userSurname.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.userSurname) }}
                    </div>
                {% endif %}
            </div>
            <div class="form-group{{ registerForm.userType.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.userType, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.userType,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.userType.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.userType) }}
                    </div>
                {% endif %}
            </div>
        </fieldset>
        <fieldset class='teams'>
            <legend>Team</legend>
            <div class="form-group{{ registerForm.player.playerLicensenumber.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.player.playerLicensenumber, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.player.playerLicensenumber,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.player.playerLicensenumber.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.player.playerLicensenumber) }}
                    </div>
                {% endif %}
            </div>
            <div class="form-group{{ registerForm.player.playerBirthyear.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.player.playerBirthyear, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.player.playerBirthyear,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.player.playerBirthyear.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.player.playerBirthyear) }}
                    </div>
                {% endif %}
            </div>
            <div class="position form-group{{ registerForm.player.playerPosition.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.player.playerPosition, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.player.playerPosition,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.player.playerPosition.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.player.playerPosition) }}
                    </div>
                {% endif %}
            </div>
            <div class="region form-group{{ registerForm.player.team.competition.region.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.player.team.competition.region, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.player.team.competition.region,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.player.team.competition.region.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.player.team.competition.region) }}
                    </div>
                {% endif %}
            </div>
            <div class="competition hide form-group{{ registerForm.player.team.competition.competitionName.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.player.team.competition.competitionName, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.player.team.competition.competitionName,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.player.team.competition.competitionName.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.player.team.competition.competitionName) }}
                    </div>
                {% endif %}
            </div>
            <div class="team hide form-group{{ registerForm.player.team.teamName.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.player.team.teamName, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    {{ form_widget(registerForm.player.team.teamName,
                    {"attr": {"class": "form-control"} }) }}
                </div>
                {% if not registerForm.player.team.teamName.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.player.team.teamName) }}
                    </div>
                {% endif %}
            </div>
        </fieldset>
        <fieldset>
            <legend>Account</legend>
            <div class="form-group{{ registerForm.userEmail.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.userEmail, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"} }) }}
                <div class="col-sm-9">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                        {{ form_widget(registerForm.userEmail,
                        {"attr": {"class": "form-control"} }) }}
                    </div>
                </div>
                {% if not registerForm.userEmail.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9 has-error">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.userEmail) }}
                    </div>
                {% endif %}
            </div>
            <div class="form-group{{ registerForm.username.vars.valid ? '' : class_error }}">
                {{ form_label(registerForm.username, label|default(),
                { "label_attr": { "class": "col-sm-3 control-label"}}) }}
                <div class="col-sm-9">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        {{ form_widget(registerForm.username,
                        {"attr": {"class": "form-control" } }) }}
                    </div>
                </div>
                {% if not registerForm.username.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {{ form_errors(registerForm.username) }}
                    </div>
                {% endif %}
            </div>
            <div class="form-group{{ registerForm.password.vars.valid ? '' : class_error }}">
                {% for passwordItem in registerForm.password %}
                    {{ form_label(passwordItem, label|default(),
                    { "label_attr": { "class": "col-sm-3 control-label"} }) }}
                    <div class="col-sm-9">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            {{ form_widget(passwordItem,
                            {"attr": {"class": "form-control"} }) }}
                        </div>
                    </div>
                {% endfor %}
                {% if not registerForm.password.vars.valid %}
                    <div class="col-sm-offset-3 col-sm-9">
                        <h5><i class="glyphicon glyphicon-warning-sign"></i> <strong>Please fix:</strong></h5>
                        {% for passwordItem in registerForm.password %}
                            {{ form_errors(passwordItem) }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </fieldset>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
                {{ form_widget(registerForm.btn_register,
                {"attr": {"class": "btn btn-primary"} }) }}
                <a href="{{ path('volley_scout_loginpage') }}" class="btn btn-link">Inloggen</a>
            </div>
            {{ form_end(registerForm) }}
        </div>
    </div>
{% endblock %}

Answer 1

两个选项字段competitionName和teamName都没有值，您为它们提供了标签和空值，因为您没有明确提到它们不是必需的symfony会设置它们按照表格的要求。

所以要么将它们设置为不需要：

->add('competitionName', 'choice', array(
        'empty_value' => 'Kies uw competitie.',
        'label' => 'Competitie',
        'required' => false // they are no longer required 
    ))

或者你给选择字段赋值：

->add('competitionName', 'choice', array(
         //choices here 
        'choices'   => array('footbal' => 'Footbal', 'swimming' => 'Swimming'),
        'empty_value' => 'Kies uw competitie.',
        'label' => 'Competitie',
        'required' => false
    ))