Support of client validation

Author: unclead

CHANGELOG.md

@@ -1,10 +1,15 @@
 Yii2 multiple input change log
 ==============================
 
+2.1.0
+=====
+
+- Enh #37: Support of client validation
+
 2.0.1
 =====
 
-- Bug #105: Change vendor name in namespace from yii to unclead
+- Bug #105: Change vendor name in namespace from yii to unclead to respect Yii recommendations
 
 2.0.0
 =====

README.md

@@ -8,7 +8,7 @@ Yii2 widget for handle multiple inputs for an attribute of model and tabular inp
 [![License](https://poser.pugx.org/unclead/yii2-multiple-input/license)](https://packagist.org/packages/unclead/yii2-multiple-input)
 
 ##Latest release
-The latest stable version of the extension is v2.0.1 Follow the [instruction](./UPGRADE.md) for upgrading from previous versions
+The latest stable version of the extension is v2.1.0 Follow the [instruction](./UPGRADE.md) for upgrading from previous versions
 
 ##Installation
 The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

composer.json

@@ -9,7 +9,7 @@
         "yii2 tabular input"
     ],
     "type": "yii2-extension",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "license": "BSD-3-Clause",
     "support": {
         "issues": "https://github.com/unclead/yii2-multiple-input/issues?state=open",

docs/tips.md

@@ -7,6 +7,7 @@
  - [Use of a widget's placeholder](#using-placeholder)
  - [Custom index of the row](#custom-index)
  - [Embedded MultipleInput widget](#embedded)
+ - [Client validation](#client-validation)
 
 ##How to customize buttons
 
@@ -182,3 +183,49 @@ echo MultipleInput::widget([
 ```
 
 But in this case you have to pass `attributeOptions` to the widget otherwise you will not be able to use ajax or client side validation of data.
+
+### Client validation
+
+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.
+
+

examples/models/ExampleModel.php

@@ -93,6 +93,7 @@ public function rules()
     {
         return [
             ['title', 'required'],
+            ['title', 'string', 'min' => 5],
             ['emails', 'validateEmails'],
             ['phones', 'validatePhones'],
             ['schedule', 'validateSchedule'],

examples/views/tabular-input.php

@@ -27,6 +27,7 @@
         'validateOnSubmit' => true,
         'validateOnBlur' => false,
     ],
+    'form' => $form,
     'columns' => [
         [
             'name' => 'id',
@@ -36,6 +37,10 @@
             'name' => 'title',
             'title' => 'Title',
             'type' => TabularColumn::TYPE_TEXT_INPUT,
+            'attributeOptions' => [
+                'enableClientValidation' => true,
+                'validateOnChange' => true,
+            ],
             'defaultValue' => 'Test',
             'enableError' => true
         ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.multipleInput",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "jQuery multipleInput",
   "scripts": {
 	  "build": "npm install && (gulp || node node_modules/gulp/bin/gulp.js)"

src/MultipleInput.php

@@ -9,8 +9,10 @@
 namespace unclead\multipleinput;
 
 use Yii;
+use yii\base\InvalidConfigException;
 use yii\base\Model;
 use yii\helpers\ArrayHelper;
+use yii\widgets\ActiveForm;
 use yii\widgets\InputWidget;
 use yii\db\ActiveRecordInterface;
 use unclead\multipleinput\renderers\TableRenderer;
@@ -114,13 +116,23 @@ class MultipleInput extends InputWidget
      */
     public $isEmbedded;
 
+    /**
+     * @var ActiveForm an instance of ActiveForm which you have to pass in case of using client validation
+     * @since 2.1
+     */
+    public $form;
+
     /**
      * Initialization.
      *
      * @throws \yii\base\InvalidConfigException
      */
     public function init()
     {
+        if ($this->form !== null && !$this->form instanceof ActiveForm) {
+            throw new InvalidConfigException('Property "form" must be an instance of yii\widgets\ActiveForm');
+        }
+
         $this->guessColumns();
         $this->initData();
 
@@ -196,6 +208,7 @@ private function createRenderer()
             'addButtonPosition' => $this->addButtonPosition,
             'rowOptions'        => $this->rowOptions,
             'context'           => $this,
+            'form'              => $this->form
         ];
 
         if ($this->removeButtonOptions !== null) {

src/TabularInput.php

@@ -13,6 +13,7 @@
 use yii\base\Model;
 use yii\db\ActiveRecordInterface;
 use yii\bootstrap\Widget;
+use yii\widgets\ActiveForm;
 use unclead\multipleinput\renderers\TableRenderer;
 use unclead\multipleinput\renderers\RendererInterface;
 
@@ -102,6 +103,12 @@ class TabularInput extends Widget
      */
     public $rendererClass;
 
+    /**
+     * @var ActiveForm an instance of ActiveForm which you have to pass in case of using client validation
+     * @since 2.1
+     */
+    public $form;
+
     /**
      * Initialization.
      *
@@ -113,6 +120,10 @@ public function init()
             throw new InvalidConfigException('You must specify "models"');
         }
 
+        if ($this->form !== null && !$this->form instanceof ActiveForm) {
+            throw new InvalidConfigException('Property "form" must be an instance of yii\widgets\ActiveForm');
+        }
+
         foreach ($this->models as $model) {
             if (!$model instanceof Model) {
                 throw new InvalidConfigException('Model has to be an instance of yii\base\Model');
@@ -147,6 +158,7 @@ private function createRenderer()
             'rowOptions'        => $this->rowOptions,
             'addButtonPosition' => $this->addButtonPosition,
             'context'           => $this,
+            'form'              => $this->form
         ];
 
         if ($this->removeButtonOptions !== null) {

src/assets/src/js/jquery.multipleInput.js

@@ -57,15 +57,8 @@
         max: 1,
         // minimum number of rows
         min: 1,
-        attributeOptions: {},
-        indexPlaceholder: 'multiple_index',
-    };
-
-    var defaultAttributeOptions = {
-        enableAjaxValidation: false,
-        validateOnBlur: false,
-        validateOnChange: false,
-        validateOnType: false
+        attributes: {},
+        indexPlaceholder: 'multiple_index'
     };
 
     var isActiveFormEnabled = false;
@@ -79,8 +72,7 @@
 
             $wrapper.data('multipleInput', {
                 settings: settings,
-                currentIndex: 0,
-                attributeDefaults: {}
+                currentIndex: 0
             });
 
 
@@ -100,27 +92,32 @@
             var intervalID = setInterval(function () {
                 if (typeof form.data('yiiActiveForm') === 'object') {
                     var attribute = form.yiiActiveForm('find', id),
-                        attributeDefaults = [];
-
+                        defaultAttributeOptions = {
+                            enableAjaxValidation: false,
+                            validateOnBlur: false,
+                            validateOnChange: false,
+                            validateOnType: false,
+                            validationDelay: 500
+                        };
+
+                    // fetch default attribute options from active from attribute
                     if (typeof attribute === 'object') {
                         $.each(attribute, function (key, value) {
                             if (['id', 'input', 'container'].indexOf(key) == -1) {
-                                attributeDefaults[key] = value;
+                                defaultAttributeOptions[key] = value;
                             }
                         });
 
                         form.yiiActiveForm('remove', id);
                     }
 
-                    var attributeOptions = $.extend({}, defaultAttributeOptions, settings.attributeOptions);
-
-                    $.each(attributeOptions, function (key, value) {
-                        if (typeof attributeDefaults[key] === 'undefined') {
-                            attributeDefaults[key] = value;
-                        }
+                    // append default options to option from settings
+                    $.each(settings.attributes, function (attribute, attributeOptions) {
+                        attributeOptions = $.extend({}, defaultAttributeOptions, attributeOptions);
+                        settings.attributes[attribute] = attributeOptions;
                     });
 
-                    $wrapper.data('multipleInput').attributeDefaults = attributeDefaults;
+                    $wrapper.data('multipleInput').settings = settings;
 
                     $wrapper.find('.multiple-input-list').find('input, select, textarea').each(function () {
                         addAttribute($(this));
@@ -318,9 +315,10 @@
             return;
         }
 
-
         var data = wrapper.data('multipleInput');
-        form.yiiActiveForm('add', $.extend({}, data.attributeDefaults, {
+        var bareID = id.replace(/-\d/, '').replace(/-\d-/, '');
+
+        form.yiiActiveForm('add', $.extend({}, data.settings.attributes[bareID], {
             'id': id,
             'input': '#' + id,
             'container': '.field-' + id

src/assets/src/js/jquery.multipleInput.min.js

@@ -110,6 +110,15 @@ abstract class BaseColumn extends Object
      * @var mixed the context of using a column. It is an instance of widget(MultipleInput or TabularInput).
      */
     public $context;
+
+    /**
+     * @var array client-side options of the attribute, e.g. enableAjaxValidation.
+     * You can use this property for custom configuration of the column (attribute).
+     * By default, the column will use options which are defined on widget level.
+     *
+     * @since 2.1
+     */
+    public $attributeOptions = [];
 
     /**
      * @var Model|ActiveRecordInterface|array