slo_nik
@slo_nik

Как вывести ошибки ajax валидации табличного ввода?

Доброе утро.
Подскажите, как правильно вывести ошибки валидации в форме?
Есть форма, в ней есть набор параметров для габаритов груза(длина, ширина, высота и так далее).
Первый набор параметров скрыт css, при выборе в выпадающем списке пункта "я знаю параметры груза" этот пункт становится видимым и рядом кнопка "добавить". При щелчке на "добавить" появляется ещё один набор параметров.
5a0032dfd1106948069456.png
В виде эти поля формируются так:
<?php
   foreach($dimensions as $key => $dimension){
?>
 <div class="b-calcColumnHeader">Длина (см)</div>
 <?= $form->field($dimension, "[$key]length")->textInput([
      'class' => 'b-calcInput',
      'placeholder' => 'см',
      ])->label(false) ?>
 <div class="b-calcColumnHeader">Ширина (см)</div>
 <?= $form->field($dimension, "[$key]width")->textInput([
      'class' => 'b-calcInput',
      'placeholder' => 'см',
      ])->label(false) ?>
 <div class="b-calcColumnHeader">Высота (см)</div>
 <?= $form->field($dimension, "[$key]height")->textInput([
      'class' => 'b-calcInput',
      'placeholder' => 'см',
      ])->label(false) ?>
 <div class="b-calcColumnHeader">Масса (кг)</div>
 <?= $form->field($dimension, "[$key]mass")->textInput([
      'class' => 'b-calcInput',
      'placeholder' => 'кг',
      ])->label(false) ?>
 <div class="b-calcColumnHeader">Кол-во (шт)</div>
 <div class="b-numberInput">
 <div class="b-numberInput__plus"></div>
 <div class="b-numberInput__minus"></div>
 <?= $form->field($dimension, "[$key]qty")->textInput([
      'class' => 'b-calcInput j-numMask',
      'placeholder' => 'шт',
      ])->label(false) ?>
<?php
   }
?>

В контролере действие для валидации(модель для параметров Dimensions):
public function actionAjaxValidate()
    {
        if(Yii::$app->request->isAjax){

            $dimensions = null;
            $calcform = null;

            $model = new MOdelName;
            $model->scenario = $scenario;

            // валидация параметров груза
            if(Yii::$app->request->post('Dimensions')){
                $count = count(Yii::$app->request->post('Dimensions', []));
                $models = [new Dimensions()];

                for($i = 1; $i < $count; $i++){
                    $models[] = new Dimensions();
                }
                if(Model::loadMultiple($models, Yii::$app->request->post())){

                    Yii::$app->response->format = Response::FORMAT_JSON;
                    $dimensions = ActiveForm::validateMultiple($models);
                }

            }
 
            if($model->load(Yii::$app->request->post())){
                Yii::$app->response->format = Response::FORMAT_JSON;
                $calcform = ActiveForm::validate($model);
            }

            if(Yii::$app->request->post('Dimensions')){
               return ArrayHelper::merge($calcform, $dimensions);
            }
            else{
                return $calcform;
            }
        }
    }

В форме, для .help-block, через ajax выставляются индексы:
<input id="dimensions-0-length" class="b-calcInput" name="Dimensions[0][length]" placeholder="см" aria-invalid="false" type="text">

После отправки формы, если есть ошибки валидации, надо подставить ошибку для соответствующего поля. В консоли браузера ошибки есть, сервер возвращает в ответе.
Как это сделать?
  • Вопрос задан
  • 301 просмотр
Решения вопроса 1
slo_nik
@slo_nik Автор вопроса, куратор тега Yii
Задачу решил.
Решение не сильно элегантное и требует серьёзной доработки, но всё таки работает, а это самое главное. Хотя бы немного разобрался как добавить динамические поля в валидацию.
$(function () {
    $('form').find('.cargo-data').on('change', function(){
        var $form = $(this).parents('form');
        console.log($(this).parents('form').attr('id'));

        var input = $form.find('input');
        $form.on('keyup', function(){

            $(this).find('.b-cargoSizes input').each(function(){
                var input = $(this);

                $form.yiiActiveForm('add', {
                    id: input.attr('id'),
                    name: input.attr('name'),
                    container: '.field-' + input.attr('id'),
                    input: '#' + input.attr('id'),
                    error: '.help-block',
                    validateOnType: true,
                    validate: function(attribute, value, messages, deferred, $form) {
                        console.log(attribute + ' - ' + value);
                        yii.validation.required(value, messages, {message: "Заполнить обязательно!"});
                        yii.validation.number(value, messages, {
                            pattern: /^\s*\d+[,|.]*\d*\s*$/,
                            message: "Должно быть числом!"
                        });
                    }
                });
            })
        })
    });
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы