[WIP] Inline form field validation

modules/backend/behaviors/FormController.php

@@ -133,6 +133,7 @@ public function initForm($model, $context = null)
         $config->model = $model;
         $config->arrayName = class_basename($model);
         $config->context = $context;
+        $config->inlineValidation = $this->getConfig("{$context}[inlineValidation]", false);
 
         /*
          * Form Widget with extensibility

modules/backend/classes/FormField.php

@@ -176,6 +176,11 @@ class FormField
      */
     public $preset;
 
+    /**
+     * @var bool Specifies if this field should use inline validation.
+     */
+    public $inlineValidation = null;
+
     /**
      * Constructor.
      * @param string $fieldName
@@ -329,7 +334,9 @@ protected function evalConfig($config)
         if (isset($config['containerAttributes'])) {
             $this->attributes($config['containerAttributes'], 'container');
         }
-
+        if (isset($config['inlineValidation'])) {
+            $this->inlineValidation = boolval($config['inlineValidation']);
+        }
         if (isset($config['valueFrom'])) {
             $this->valueFrom = $config['valueFrom'];
         }

modules/backend/classes/FormTabs.php

@@ -31,12 +31,12 @@ class FormTabs implements IteratorAggregate, ArrayAccess
      * @var string Default tab label to use when none is specified.
      */
     public $defaultTab = 'backend::lang.form.undefined_tab';
-    
+
     /**
      * @var array List of icons for their corresponding tabs.
      */
     public $icons = [];
-    
+
     /**
      * @var bool Should these tabs stretch to the bottom of the page layout.
      */
@@ -47,6 +47,11 @@ class FormTabs implements IteratorAggregate, ArrayAccess
      */
     public $suppressTabs = false;
 
+    /**
+     * @var boolean If set to TRUE, this section will use inline validation for fields.
+     */
+    public $inlineValidation = false;
+
     /**
      * @var string Specifies a CSS class to attach to the tab container.
      */
@@ -86,11 +91,11 @@ protected function evalConfig($config)
         if (array_key_exists('defaultTab', $config)) {
             $this->defaultTab = $config['defaultTab'];
         }
-        
+
         if (array_key_exists('icons', $config)) {
             $this->icons = $config['icons'];
         }
-        
+
         if (array_key_exists('stretch', $config)) {
             $this->stretch = $config['stretch'];
         }
@@ -99,6 +104,10 @@ protected function evalConfig($config)
             $this->suppressTabs = $config['suppressTabs'];
         }
 
+        if (array_key_exists('inlineValidation', $config)) {
+            $this->inlineValidation = boolval($config['inlineValidation']);
+        }
+
         if (array_key_exists('cssClass', $config)) {
             $this->cssClass = $config['cssClass'];
         }
@@ -182,7 +191,7 @@ public function getAllFields()
 
         return $tablessFields;
     }
-    
+
     /**
      * Returns an icon for the tab based on the tab's name.
      * @param string $name
@@ -194,7 +203,7 @@ public function getIcon($name)
             return $this->icons[$name];
         }
     }
-    
+
     /**
      * Returns a tab pane CSS class.
      * @param string $index

modules/backend/models/user/fields.yaml

@@ -16,7 +16,8 @@ tabs:
         backend::lang.user.account: icon-user
         backend::lang.user.groups: icon-users
         backend::lang.user.permissions: icon-key
-
+    inlineValidation: true
+
     fields:
         login:
             span: left

modules/backend/widgets/Form.php

@@ -70,6 +70,12 @@ class Form extends WidgetBase
      */
     public $isNested = false;
 
+    /**
+     * @var boolean If set to TRUE, this form or section will use inline validation for
+     * fields.
+     */
+    public $inlineValidation = false;
+
     //
     // Object properties
     //
@@ -134,6 +140,7 @@ public function init()
             'context',
             'arrayName',
             'isNested',
+            'inlineValidation'
         ]);
 
         $this->widgetManager = WidgetManager::instance();
@@ -204,6 +211,7 @@ public function render($options = [])
 
             $targetPartial = 'section';
             $extraVars['renderSection'] = $section;
+            $extraVars['inlineValidation'] = $this->allTabs->{$section}->inlineValidation ?? false;
         }
 
         /*
@@ -240,7 +248,7 @@ public function render($options = [])
     public function renderField($field, $options = [])
     {
         $this->prepareVars();
-        
+
         if (is_string($field)) {
             if (!isset($this->allFields[$field])) {
                 throw new ApplicationException(Lang::get(
@@ -452,6 +460,50 @@ public function onRefresh()
         return $result;
     }
 
+    /**
+     * Validates a single field in the context of the entire form contents.
+     *
+     * @return array `valid` (bool) whether the field input is valid
+     *               `message` (string) the validation error message, if any
+     */
+    public function onValidateField()
+    {
+        $saveData = $this->getSaveData();
+        $field = input('fieldName');
+        $valid = true;
+        $message = null;
+
+        // Check that the model has a validation method. This should be provided by
+        // the October\Rain\Database\Traits\Validation trait.
+        if (!method_exists($this->model, 'validate')) {
+            return;
+        }
+
+        $className = get_class($this->model);
+        $model = new $className($saveData);
+        try {
+            $success = $model->validate();
+        } catch (\Exception $e) {
+            $success = false;
+        }
+
+        if (!$success) {
+            $errors = $model->errors()->toArray() ?? [
+                $field => $e->getMessage()
+            ];
+
+            if (isset($errors[$field])) {
+                $valid = false;
+                $message = $errors[$field][0];
+            }
+        }
+
+        return [
+            'valid' => $valid,
+            'message' => $message
+        ];
+    }
+
     /**
      * Creates a flat array of form fields from the configuration.
      * Also slots fields in to their respective tabs.

modules/backend/widgets/form/assets/js/october.form.js

@@ -12,6 +12,7 @@
         this.$el = $(element)
         this.options = options || {}
         this.fieldElementCache = null
+        this.fieldValidationElementCache = null
 
         /*
          * Throttle dependency updating
@@ -35,6 +36,7 @@
         this.bindCheckboxlist()
         this.toggleEmptyTabs()
         this.bindCollapsibleSections()
+        this.bindValidation()
 
         this.$el.on('oc.triggerOn.afterUpdate', this.proxy(this.toggleEmptyTabs))
         this.$el.one('dispose-control', this.proxy(this.dispose))
@@ -89,6 +91,36 @@
         return this.fieldElementCache = form.find('[data-field-name]').not(nestedFields)
     }
 
+    /*
+     * Get all fields elements that belong to this form or are part of a section of this form that
+     * has inline validation enabled, or have inline validation enabled for the field explicitly.
+     * Strip out any fields that are explicitly not to be validated, or are part of a nested form.
+     */
+    FormWidget.prototype.getFieldElementsToValidate = function() {
+        if (this.fieldValidationElementCache !== null) {
+            return this.fieldValidationElementCache
+        }
+
+        var $form = this.$el,
+            nestedFields = $form.find('[data-control="formwidget"] [data-field-name]'),
+            fields = []
+
+        // Find forms and sections that are marked for inline validation
+        if ($form.data('inline-validation') !== undefined && $form.data('inline-validation') !== 0) {
+            $form.find('[data-field-name]').not(nestedFields).not('[data-inline-validation="0"]').each(function () {
+                var $field = $(this);
+
+                if ($field.data('inline-validation') !== undefined && $field.data('inline-validation') === 0) {
+                    return
+                }
+
+                fields.push(this)
+            })
+        }
+
+        return this.fieldValidationElementCache = fields;
+    }
+
     /*
      * Bind dependant fields
      */
@@ -220,6 +252,99 @@
             .nextUntil('.section-field').hide()
     }
 
+    /*
+     * Bind validation checks on available fields, triggered when
+     * the fields is blurred or changed
+     */
+    FormWidget.prototype.bindValidation = function () {
+        var fields = this.getFieldElementsToValidate(),
+            $form = this.$form
+
+        for (var i in fields) {
+            var field = fields[i]
+
+            if (!field || !field.className) {
+                continue
+            }
+
+            var fieldClasses = field.className.split(/\s+/).map(function (className) {
+                var fieldClass = className.match(/^([a-z\-]+)-field$/)
+                if (fieldClass) {
+                    return fieldClass[1]
+                } else {
+                    return null
+                }
+            }).filter(function (className) {
+                return (className != null)
+            })
+
+            if (fieldClasses.length === 0) {
+                continue
+            }
+
+            // Load validator depending on field type
+            switch (fieldClasses[0]) {
+                case 'text':
+                case 'password':
+                case 'number':
+                case 'textarea':
+                    this._validateText($form, field)
+                    break
+            }
+        }
+    }
+
+    FormWidget.prototype.fieldResponseHandler = function ($form, $field, data, status) {
+        if (status !== 'success') {
+            return
+        }
+
+        if (data.valid !== undefined && data.valid === false) {
+            this.showFieldError($field, data.message)
+        }
+    }
+
+    FormWidget.prototype.showFieldError = function ($field, message) {
+        $field.addClass('has-error')
+
+        var $error = $('<div class="validation-error"></div>')
+        $error.text(message)
+
+        $field.append($error)
+    }
+
+
+    FormWidget.prototype.clearFieldError = function ($field) {
+        $field.removeClass('has-error')
+        $field.find('.validation-error').remove()
+    }
+
+    FormWidget.prototype._validateText = function ($form, field) {
+        var $elem = this.$el,
+            $field = $(field),
+            widget = this
+
+        var innerField = field.querySelector('input,textarea')
+        if (!innerField) {
+            return
+        }
+
+        innerField.addEventListener('blur', function (ev) {
+            widget.clearFieldError($field)
+
+            $elem.request('onValidateField', {
+                data: {
+                    fieldId: field.id,
+                    fieldName: field.dataset.fieldName
+                },
+                form: $form,
+                success: function (data, status, jqXHR) {
+                    widget.fieldResponseHandler($form, $field, data, status, jqXHR)
+                }
+            })
+        })
+    }
+
     FormWidget.DEFAULTS = {
         refreshHandler: null,
         refreshData: {}

modules/backend/widgets/form/partials/_field-container.htm

@@ -3,7 +3,10 @@
     <?php if ($depends = $this->getFieldDepends($field)): ?>data-field-depends="<?= $depends ?>"<?php endif ?>
     data-field-name="<?= $field->fieldName ?>"
     <?= $field->getAttributes('container') ?>
+    <?php if (isset($field->inlineValidation)): ?>
+    data-inline-validation="<?= ($field->inlineValidation === true) ? 1 : 0 ?>"
+    <?php endif; ?>
     id="<?= $field->getId('group') ?>"><?=
     /* Must be on the same line for :empty selector */
     trim($this->makePartial('field', ['field' => $field]))
-?></div>
+?></div>

modules/backend/widgets/form/partials/_form-container.htm

@@ -1,6 +1,9 @@
 <div
     data-control="formwidget"
     data-refresh-handler="<?= $this->getEventHandler('onRefresh') ?>"
+    <?php if ($this->inlineValidation): ?>
+    data-inline-validation="1"
+    <?php endif; ?>
     class="form-widget form-elements layout"
     role="form"
     id="<?= $this->getId() ?>">

modules/backend/widgets/form/partials/_section-container.htm

@@ -1,6 +1,9 @@
 <div
     data-control="formwidget"
     data-refresh-handler="<?= $this->getEventHandler('onRefresh') ?>"
+    <?php if (isset($inlineValidation)): ?>
+    data-inline-validation="<?= ($inlineValidation === true) ? 1 : 0 ?>"
+    <?php endif; ?>
     class="layout-row"
     role="form"
     id="<?= $this->getId($renderSection.'Container') ?>">
@@ -17,4 +20,4 @@
         <?= $this->makePartial('section', ['tabs' => $secondaryTabs]) ?>
     <?php endif ?>
 
-</div>
+</div>