Yii 2.0 Loading submodels dynamically -- how to use client-side validation? - php

Question

This function was build manually, but we want to know if there is a way, using Yii 2, of getting the model JS validation function automatically. We did so just to test.
Question:
How should we do this, without manually build this for each submodel form field?
JavaScript to add dynamic submodels' fields:
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'));
How should we do the attributes adding if we have a submodel with many fields?
$(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();
}
Aditional info:
HorsePreferredFood's rules:
public function rules()
{
return [
[['name', 'horse_id'], 'required'],
[['horse_id'], 'integer'],
[['name'], 'string', 'max' => 255]
];
}
The main form (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>
The submodel form (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>
In HorseController, the action invoked via AJAX to return the submodel fields:
public function actionAddHorsePreferredFood() {
$index = $_POST['index'];
$partialView = "/horsePreferredFood/_form";
return $this->renderPartial(
$partialView,
[
'index' => $index,
'isAjaxCall' => true,
]
);
}