Yii 2.0动态加载子模型 - 如何使用客户端验证?

时间:2015-02-03 10:44:47

标签: php ajax yii2

这个函数是手动构建的,但我们想知道是否有一种方法,使用Yii 2,自动获取模型JS验证函数。我们这样做只是为了测试。

问题:

我们应该怎样做,而不是为每个子模型表单字段手动构建它?

JavaScript添加动态子模型'字段:

var horsePreferredFoodValidateFunction = function(attribute, value, messages) {
        yii.validation.required(value, messages, {"message": "mandatory field"});
    };

    $(window).load(function() {
        $('.container').on('click', '#add-horse-preferred-food', function() {
            var horsePreferredFoodsCount = (parseInt($('#horsePreferredFoodsCount').val())) + 1;
            $.post(
                '/horse/add-horse-preferred-food',
                {index : horsePreferredFoodsCount},
                function(data) {
                    $('#horsePreferredFoodsCount').val(horsePreferredFoodsCount);
                    $("#horse-preferred-food-list").append(data);
                    var horseForm = $('#horse-form');
                    console.log(horseForm.data('yiiActiveForm'));

如果我们有一个包含许多字段的子模型,我们应该如何添加属性?

                    $(horseForm).yiiActiveForm('add', {
                        id: 'horsepreferredfood-' + horsePreferredFoodsCount + '-name',
                        input: '#horsepreferredfood-' + horsePreferredFoodsCount + '-name',
                        name: 'name',//'[' + horsePreferredFoodsCount + '][name]',
                        container: '.field-horsepreferredfood-' + horsePreferredFoodsCount + '-name',
                        validate: horsePreferredFoodValidateFunction,
                        error: '.help-block.help-block-error'
                    });
                    console.log(horseForm.data('yiiActiveForm'));
                }
            );
        });
    });

    function removeHorsePreferredFood(id) {
        $('#div-horse-preferred-food-' + id).remove();
    }

有条件的信息:

HorsePreferredFood的规则:

public function rules()
{
    return [
        [['name', 'horse_id'], 'required'],
        [['horse_id'], 'integer'],
        [['name'], 'string', 'max' => 255]
    ];
}

主要表格(horse / _form.php):

<div class="horse-form">
<?php
        $form = ActiveForm::begin(
            [
                'id' => 'horse-form',
                'action' => '/horse/' . (($horse->isNewRecord) ? 'create' : 'update/' . $horse->id),
                'errorCssClass' => 'errorMessage',
            ]
        );
?>
    <?= $form->field($horse, 'name')->textInput(['maxlength' => 255]) ?>
    <?= $form->field($horse, 'age')->textInput() ?>

    <!-- HORSE PREFERRED FOODS -->

    <fieldset class="fieldset">
        <legend>Comidas Preferidas:</legend>
        <div id ="horse-preferred-food-list">
<?php
        $horsePreferredFoodsCount = count($horsePreferredFoods);

        foreach ($horsePreferredFoods as $horsePreferredFoodIndex => $horsePreferredFood) {
            $this->renderPartial(
                '/horsePreferredFood/_form',
                array(
                    'index' => $horsePreferredFoodIndex,
                    'horsePreferredFood' => $horsePreferredFood,
                    'form' => $form,
                )
            );
            echo $form->field($horsePreferredFood, 'name')->textInput(['maxLength' => 255]);
        }
?>
        </div>
        <div class="form-group">
<?php
            echo \yii\bootstrap\Button::widget(
                [
                    'label' => 'Adicionar Comida Preferida',
                    'options' => [
                        'id' => 'add-horse-preferred-food',
                        'class' => 'btn-lg',
                    ],
                ]
            );
?>
        </div>
    </fieldset>
    <div class="form-group">
        <?= Html::submitButton(
                $horse->isNewRecord ?
                        'Criar' : 'Alterar',
                [
                        'class' => $horse->isNewRecord ?
                                'btn btn-success' : 'btn btn-primary'
                ]
        ); ?>
    </div>
<?php
    ActiveForm::end();
    echo Html::hiddenInput(
        'horsePreferredFoodsCount',
        $horsePreferredFoodsCount,
        [
            'id' => 'horsePreferredFoodsCount',
        ]
    );
?>
</div>

子模型形式(horsePreferredFood / _form.php):

<?php
    if (isset($isAjaxCall) && ($isAjaxCall)) {
        $horsePreferredFood = new \app\models\HorsePreferredFood();
    } else {
        $isAjaxCall = false;
    }

    if (! isset($form)) {
        $form = \yii\bootstrap\ActiveForm::begin(
                [
                    'id' => 'horse-form',
                    'enableAjaxValidation' => false,
                    'enableClientValidation' => true,
                ]
        );
    }
?>
<div class="form" id="div-horse-preferred-food-<?php echo $index; ?>">
        <fieldset class="fieldset">
            <div class="form-group">
<?php
                echo \yii\helpers\Html::activeHiddenInput($horsePreferredFood, "[$index]id");
                echo $form->field($horsePreferredFood, "[$index]name")->textInput(['maxlength' => 255]);
?>
            </div>
        </fieldset>
        <div class="form-group">
<?php
            echo \yii\bootstrap\Button::widget(
                [
                    'label' => 'Remover Comida Preferida',
                    'options' => [
                        'id' => "btn-remove-horse-preferred-food-$index",
                        'class' => 'btn-lg',
                        'onClick' => "removeHorsePreferredFood($index);",
                    ],
                ]
            );
?>
        </div>
</div>

在HorseController中,通过AJAX调用的动作返回子模型字段:

public function actionAddHorsePreferredFood() {
        $index = $_POST['index'];
        $partialView = "/horsePreferredFood/_form";

        return $this->renderPartial(
            $partialView,
            [
                'index' => $index,
                'isAjaxCall' => true,
            ]
        );
}

0 个答案:

没有答案