#37 Added support of client validation

Author: unclead

CHANGELOG.md

@@ -5,6 +5,7 @@ Yii2 multiple input change log
 ---------------------
 
 - Bug #70: replacing of the placeholder after preparing the content of row
+- Enh #37: Added support of client validation
 
 1.2.15
 ------

README.md

@@ -20,7 +20,8 @@ Contents:
  - [Work with empty list](#work-with-empty-list)
  - [Guess column title](#guess-column-title)
  - [Ajax loading of a widget](#ajax-loading)
- - [Using of a placeholder {multiple_index}](#using-placeholder)
+ - [Use of a widget's placeholder](#using-placeholder)
+ - [How to enable client validation](#client-validation)
 - [Javascript Events](#javascript-events)
 - [Renderers](#renderers)
 
@@ -119,6 +120,11 @@ function($data) {}
 
 **errorOptions** *array*: the HTMl attributes for the error tag
 
+**attributeOptions** *array*: client-side attribute options of the column.
+You can use it to configure a column in specific way, e.g. you can enable client validation for particular
+column meanwhile other columns will be validated via ajax validation
+
+
 ### Input types
 
 Each column in a row can has their own type. Widget supports:
@@ -371,9 +377,9 @@ Assume you want to load a widget via ajax and then show it inside modal window.
 
 You can fina an example of usage in a discussion of [issue](https://github.com/unclead/yii2-multiple-input/issues/58)
 
-### Using of a placeholder {multiple_index} <a id="using-placeholder"></a>
+### se of a widget's placeholder <a id="using-placeholder"></a>
 
-You can use a placeholder {multiple index} in a widget configuration, e.g. for implementation of dependent drop down lists.
+You can use a placeholder `{multiple index}` in a widget configuration, e.g. for implementation of dependent drop down lists.
 
 ```php
     <?= $form->field($model, 'field')->widget(MultipleInput::className(), [
@@ -416,6 +422,51 @@ JS
     ?>
 ```
 
+### How to enable client validation <a id="client-validation"></a>
+
+Apart of ajax validation you can use client validation but in this case you MUST set property `form`.
+Also ensure that you set `enableClientValidation` to `true` value in property `attributeOptions`. If you want to use client validation
+for particular column you can use `attributeOptions` property for this column. An example of using client validation is listed below:
+
+```php
+<?= TabularInput::widget([
+    'models' => $models,
+    'form' => $form,
+    'attributeOptions' => [
+        'enableAjaxValidation' => true,
+        'enableClientValidation' => false,
+        'validateOnChange' => false,
+        'validateOnSubmit' => true,
+        'validateOnBlur' => false,
+    ],
+    'columns' => [
+        [
+            'name' => 'id',
+            'type' => TabularColumn::TYPE_HIDDEN_INPUT
+        ],
+        [
+            'name' => 'title',
+            'title' => 'Title',
+            'type' => TabularColumn::TYPE_TEXT_INPUT,
+            'attributeOptions' => [
+                'enableClientValidation' => true,
+                'validateOnChange' => true,
+            ],
+            'enableError' => true
+        ],
+        [
+            'name' => 'description',
+            'title' => 'Description',
+        ],
+    ],
+]) ?>
+
+```
+
+In the example above we use client validation for column `title` and ajax validation for column `description`.
+As you can noticed we also enabled `validateOnChange` for column `title` thus you can use all client-side options from the `ActiveField` class.
+
+
 ## JavaScript events
 This widget has following events:
  - `afterInit`: triggered after initialization

examples/actions/MultipleInputAction.php

@@ -33,8 +33,7 @@ public function run()
                 Yii::error('Validation errors: ' . print_r($model->getErrors(), true));
             }
         }
-
-
+        
         return $this->controller->render('@unclead-examples/views/multiple-input.php', ['model' => $model]);
     }
 }

examples/models/ExampleModel.php

@@ -22,17 +22,25 @@ class ExampleModel extends Model
     public $emails;
 
     /**
-     * @var
+     * @var array
      */
     public $phones;
 
     /**
-     * @var
+     * @var array
      */
     public $schedule;
 
+    /**
+     * @var bool
+     */
     public $enable;
 
+    /**
+     * @var string
+     */
+    public $title;
+
     public function init()
     {
         parent::init();
@@ -62,6 +70,7 @@ public function init()
     public function rules()
     {
         return [
+            ['title', 'required'],
             ['emails', 'validateEmails'],
             ['phones', 'validatePhones'],
             ['schedule', 'validateSchedule']
@@ -72,14 +81,16 @@ public function attributes()
     {
         return [
             'emails',
-            'phones'
+            'phones',
+            'title',
+            'schedule'
         ];
     }
 
     public function scenarios()
     {
         return [
-            self::SCENARIO_DEFAULT => ['emails', 'phones', 'schedule']
+            self::SCENARIO_DEFAULT => ['emails', 'phones', 'schedule', 'title']
         ];
     }
 

examples/models/Item.php

@@ -50,6 +50,7 @@ public function rules()
     {
         return [
             [['title', 'description'], 'required'],
+            [['title'], 'string', 'min' => 5, 'max' => 64],
             [['id', 'file'], 'safe']
         ];
     }

examples/views/multiple-input.php

@@ -133,6 +133,7 @@
         ]
     ]
 ]);
+
 ?>
 
 <?= Html::submitButton('Update', ['class' => 'btn btn-success']);?>

examples/views/tabular-input.php

@@ -3,45 +3,48 @@
 use yii\bootstrap\ActiveForm;
 use unclead\widgets\TabularInput;
 use yii\helpers\Html;
-use \unclead\widgets\examples\models\Item;
+use unclead\widgets\examples\models\Item;
+use unclead\widgets\TabularColumn;
+
 
 /* @var $this \yii\web\View */
 /* @var $models Item[] */
 ?>
 
 <?php $form = \yii\bootstrap\ActiveForm::begin([
-    'id'                        => 'tabular-form',
-    'enableAjaxValidation'      => true,
-    'enableClientValidation'    => false,
-    'validateOnChange'          => false,
-    'validateOnSubmit'          => true,
-    'validateOnBlur'            => false,
+    'id' => 'tabular-form',
     'options' => [
         'enctype' => 'multipart/form-data'
     ]
 ]) ?>
 
 <?= TabularInput::widget([
     'models' => $models,
+    'form' => $form,
     'attributeOptions' => [
-        'enableAjaxValidation'      => true,
-        'enableClientValidation'    => false,
-        'validateOnChange'          => false,
-        'validateOnSubmit'          => true,
-        'validateOnBlur'            => false,
+        'enableAjaxValidation' => true,
+        'enableClientValidation' => false,
+        'validateOnChange' => false,
+        'validateOnSubmit' => true,
+        'validateOnBlur' => false,
     ],
     'columns' => [
         [
             'name' => 'id',
-            'type' => \unclead\widgets\TabularColumn::TYPE_HIDDEN_INPUT
+            'type' => TabularColumn::TYPE_HIDDEN_INPUT
         ],
         [
-            'name'  => 'title',
+            'name' => 'title',
             'title' => 'Title',
-            'type'  => \unclead\widgets\MultipleInputColumn::TYPE_TEXT_INPUT,
+            'type' => TabularColumn::TYPE_TEXT_INPUT,
+            'attributeOptions' => [
+                'enableClientValidation' => true,
+                'validateOnChange' => true,
+            ],
+            'enableError' => true
         ],
         [
-            'name'  => 'description',
+            'name' => 'description',
             'title' => 'Description',
         ],
 //        [
@@ -55,7 +58,7 @@
 //            ]
 //        ],
         [
-            'name'  => 'date',
+            'name' => 'date',
             'type'  => \kartik\date\DatePicker::className(),
             'title' => 'Day',
             'options' => [
@@ -73,5 +76,5 @@
 ]) ?>
 
 
-<?= Html::submitButton('Update', ['class' => 'btn btn-success']);?>
-<?php ActiveForm::end();?>
+<?= Html::submitButton('Update', ['class' => 'btn btn-success']); ?>
+<?php ActiveForm::end(); ?>

src/MultipleInput.php

@@ -10,8 +10,9 @@
 
 use Yii;
 use yii\base\Model;
+use yii\widgets\ActiveForm;
 use yii\widgets\InputWidget;
-use yii\db\ActiveRecord;
+use yii\db\ActiveRecordInterface;
 use unclead\widgets\renderers\TableRenderer;
 
 
@@ -26,7 +27,7 @@ class MultipleInput extends InputWidget
     const POS_ROW       = 1;
 
     /**
-     * @var ActiveRecord[]|array[] input data
+     * @var ActiveRecordInterface[]|array[] input data
      */
     public $data = null;
 
@@ -99,6 +100,11 @@ class MultipleInput extends InputWidget
      */
     public $columnClass;
 
+    /**
+     * @var ActiveForm the instance of `ActiveForm` class.
+     */
+    public $form;
+
     /**
      * Initialization.
      *
@@ -166,7 +172,8 @@ private function createRenderer()
             'min'               => $this->min,
             'addButtonPosition' => $this->addButtonPosition,
             'rowOptions'        => $this->rowOptions,
-            'context'           => $this
+            'context'           => $this,
+            'form'              => $this->form
         ];
 
         if (!is_null($this->removeButtonOptions)) {

src/MultipleInputColumn.php

@@ -23,7 +23,7 @@ class MultipleInputColumn extends BaseColumn
     /**
      * @var MultipleInput
      */
-    public $widget;
+    public $context;
 
     /**
      * @throws InvalidConfigException
@@ -32,7 +32,7 @@ public function init()
     {
         parent::init();
 
-        if ($this->enableError && !$this->widget->model instanceof Model) {
+        if ($this->enableError && !$this->context->model instanceof Model) {
             throw new InvalidConfigException('Property "enableError" available only when model is defined.');
         }
     }
@@ -63,19 +63,19 @@ public function getElementName($index, $withPrefix = true)
      */
     private function getInputNamePrefix()
     {
-        $model = $this->widget->model;
+        $model = $this->context->model;
         if ($model instanceof Model) {
             if (empty($this->renderer->columns) || (count($this->renderer->columns) == 1 && $this->hasModelAttribute($this->name))) {
                 return $model->formName();
             }
-            return Html::getInputName($this->widget->model, $this->widget->attribute);
+            return Html::getInputName($this->context->model, $this->context->attribute);
         }
-        return $this->widget->name;
+        return $this->context->name;
     }
 
     private function hasModelAttribute($name)
     {
-        $model = $this->widget->model;
+        $model = $this->context->model;
 
         if ($model->hasProperty($name)) {
             return true;
@@ -88,7 +88,7 @@ private function hasModelAttribute($name)
 
     public function getFirstError($index)
     {
-        $attribute = $this->widget->attribute . $this->getElementName($index, false);
-        return $this->widget->model->getFirstError($attribute);
+        $attribute = $this->context->attribute . $this->getElementName($index, false);
+        return $this->context->model->getFirstError($attribute);
     }
 }

src/TabularColumn.php

@@ -73,6 +73,4 @@ public function setModel($model)
             parent::setModel($model);
         }
     }
-
-
 }