WIP If the model contains errors, display inline errors in jsoneditor

src/models/crud/WidgetContent.php

@@ -3,6 +3,7 @@
 namespace hrzg\widget\models\crud;
 
 use hrzg\widget\models\crud\base\Widget as BaseWidget;
+use hrzg\widget\validators\ClientSideJsonValidator;
 use hrzg\widget\widgets\Cell;
 use JsonSchema\Validator;
 use yii\behaviors\TimestampBehavior;
@@ -182,6 +183,12 @@ public function rules()
             'operator' => '>',
             'type' => 'datetime'
         ];
+
+        $rules[] = [
+            'default_properties_json',
+            ClientSideJsonValidator::class
+        ];
+
         // add json schema validation if enabled in module
         if (!empty(\Yii::$app->controller->module->validateContentSchema)) {
             $rules['validate_properties_json'] = [

src/models/crud/WidgetContentTranslation.php

@@ -11,6 +11,7 @@
 
 use hrzg\widget\models\crud\base\Widget;
 use hrzg\widget\models\crud\base\WidgetTranslation;
+use hrzg\widget\validators\ClientSideJsonValidator;
 use JsonSchema\Validator;
 use yii\caching\TagDependency;
 use yii\helpers\Json;
@@ -30,6 +31,12 @@ class WidgetContentTranslation extends WidgetTranslation
     public function rules()
     {
         $rules = parent::rules();
+
+        $rules[] = [
+            'default_properties_json',
+            ClientSideJsonValidator::class
+        ];
+
         // add json schema validation if enabled in module
         if (!empty(\Yii::$app->controller->module->validateContentSchema)) {
             $rules['validate_properties_json'] = [

src/validators/ClientSideJsonValidator.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace hrzg\widget\validators;
+
+use yii\validators\Validator;
+
+class ClientSideJsonValidator extends Validator
+{
+    public function validateValue($value)
+    {
+        return [];
+    }
+
+    public function clientValidateAttribute($model, $attribute, $view)
+    {
+        return <<<JS
+            const editor = window.jsonEditors[0]
+
+            if (!editor) {
+              return
+            }
+
+            const errors = editor.validate()
+
+
+            // collect error messages for this validator
+            errors.forEach(function (error) {
+              const invalidEditor = editor.getEditor(error.path)
+              const field = invalidEditor.schema.title || error.path
+              const message = field + ': ' + error.message
+              messages.push(message)
+            })
+
+            // coerce json-editor to display own inline error messages
+            Object.values(editor.editors).forEach(function (editor) {
+              editor.is_dirty = true
+            })
+
+            editor.root.showValidationErrors(errors)
+
+            // remove the 'has-error' class from editor container. Using * selector because
+            // the class name can change from model to mode but the attribute in this case
+            // is always "default_properties_json"
+            const targetNode = document.querySelector('[class*="default_properties_json"]')
+
+            const observer = new MutationObserver((mutations) => {
+              mutations.forEach(() => {
+                if (targetNode.classList.contains('has-error')) {
+                  targetNode.classList.remove('has-error')
+                  observer.disconnect()
+                }
+              })
+            })
+
+            observer.observe(targetNode, { attributes: true, attributeFilter: ['class'] })
+        JS;
+    }
+}

src/views/crud/widget-translation/_form.php

@@ -90,15 +90,22 @@
             <?= $form->errorSummary($model) ?>
 
             <?php \yii\widgets\Pjax::begin(['id' => 'pjax-widget-form']) ?>
-            <?= $form->field($model, 'default_properties_json')->label(false)
+            <?= $form->field($model, 'default_properties_json', [
+                'template' => '{input}'
+            ])->label(false)
                 ->widget(\dmstr\jsoneditor\JsonEditorWidget::class, [
                     'id' => 'editor',
                     'schema' => $schema,
                     'clientOptions' => [
                         'theme' => 'bootstrap3',
+                        'iconlib' => 'fontawesome4',
                         'disable_collapse' => true,
-                        'disable_properties' => true,
-                        'keep_oneof_values' => false
+                        'disable_properties' => false,
+                        "no_additional_properties" => false,
+                        'keep_oneof_values' => false,
+                        'expand_height' => true,
+                        'ajax' => !empty(\Yii::$app->controller->module->allowAjaxInSchema) ? true : false,
+                        'show_errors' => $model->hasErrors() ? 'always' : 'interaction'
                     ],
                 ]); ?>
             <?php \yii\widgets\Pjax::end() ?>

src/views/crud/widget-translation/update.php

@@ -55,7 +55,7 @@
         [
             'id'                     => 'widget-update',
             'layout'                 => 'default',
-            'enableClientValidation' => false,
+            'enableClientValidation' => true,
             'errorSummaryCssClass'   => 'error-summary alert alert-error',
             'fieldConfig'            => [
                 'horizontalCssClasses' => [

src/views/crud/widget/_form.php

@@ -114,7 +114,9 @@
 
 
             <?php \yii\widgets\Pjax::begin(['id' => 'pjax-widget-form']) ?>
-            <?= $form->field($model, 'default_properties_json')->label(false)
+            <?= $form->field($model, 'default_properties_json', [
+                'template' => '{input}'
+            ])->label(false)
                 ->widget(\dmstr\jsoneditor\JsonEditorWidget::className(), [
                     'id' => 'editor',
                     'schema' => $schema,
@@ -127,6 +129,7 @@
                         'keep_oneof_values' => false,
                         'expand_height' => true,
                         'ajax' => !empty(\Yii::$app->controller->module->allowAjaxInSchema) ? true : false,
+                        'show_errors' => $model->hasErrors() ? 'always' : 'interaction'
                     ],
                 ]); ?>
             <?php \yii\widgets\Pjax::end() ?>

src/views/crud/widget/create.php

@@ -39,7 +39,7 @@
         [
             'id'                     => 'widget-create',
             'layout'                 => 'default',
-            'enableClientValidation' => false,
+            'enableClientValidation' => true,
             'errorSummaryCssClass'   => 'error-summary alert alert-error',
             'fieldConfig'            => [
                 'horizontalCssClasses' => [

src/views/crud/widget/update.php

@@ -60,7 +60,7 @@
         [
             'id'                     => 'widget-update',
             'layout'                 => 'default',
-            'enableClientValidation' => false,
+            'enableClientValidation' => true,
             'errorSummaryCssClass'   => 'error-summary alert alert-error',
             'fieldConfig'            => [
                 'horizontalCssClasses' => [