feat: implement validate on blur & input

packages/form-js-viewer/src/Form.js

@@ -1,8 +1,11 @@
 import Ids from 'ids';
 import { get, isString, set } from 'min-dash';
 
-import ExpressionLanguageModule from './features/expression-language';
-import MarkdownModule from './features/markdown';
+import {
+  ExpressionLanguageModule,
+  MarkdownModule,
+  ViewerCommandsModule
+} from './features';
 
 import core from './core';
 
@@ -381,7 +384,8 @@ export default class Form {
   _getModules() {
     return [
       ExpressionLanguageModule,
-      MarkdownModule
+      MarkdownModule,
+      ViewerCommandsModule
     ];
   }
 

packages/form-js-viewer/src/features/index.js

@@ -1,5 +1,7 @@
 export { default as ExpressionLanguageModule } from './expression-language';
 export { default as MarkdownModule } from './markdown';
+export { default as ViewerCommandsModule } from './viewerCommands';
 
 export * from './expression-language';
-export * from './markdown';
+export * from './markdown';
+export * from './viewerCommands';

packages/form-js-viewer/src/features/viewerCommands/ViewerCommands.js

@@ -0,0 +1,38 @@
+import UpdateFieldValidationHandler from './cmd/UpdateFieldValidationHandler';
+
+export default class ViewerCommands {
+  constructor(commandStack, eventBus) {
+    this._commandStack = commandStack;
+
+    eventBus.on('form.init', () => {
+      this.registerHandlers();
+    });
+  }
+
+  registerHandlers() {
+    Object.entries(this.getHandlers()).forEach(([ id, handler ]) => {
+      this._commandStack.registerHandler(id, handler);
+    });
+  }
+
+  getHandlers() {
+    return {
+      'formField.validation.update': UpdateFieldValidationHandler
+    };
+  }
+
+  updateFieldValidation(field, value) {
+    const context = {
+      field,
+      value
+    };
+
+    this._commandStack.execute('formField.validation.update', context);
+  }
+
+}
+
+ViewerCommands.$inject = [
+  'commandStack',
+  'eventBus'
+];

packages/form-js-viewer/src/features/viewerCommands/cmd/UpdateFieldValidationHandler.js

@@ -0,0 +1,28 @@
+import { set } from 'min-dash';
+import { clone, pathStringify } from '../../../util';
+
+export default class UpdateFieldValidationHandler {
+
+  constructor(form, validator) {
+    this._form = form;
+    this._validator = validator;
+  }
+
+  execute(context) {
+    const { field, value } = context;
+    const { _path } = field;
+    const { errors } = this._form._getState();
+
+    context.oldErrors = clone(errors);
+
+    const fieldErrors = this._validator.validateField(field, value);
+    const updatedErrors = set(errors, [ pathStringify(_path) ], fieldErrors.length ? fieldErrors : undefined);
+    this._form._setState({ errors: updatedErrors });
+  }
+
+  revert(context) {
+    this._form._setState({ errors: context.oldErrors });
+  }
+}
+
+UpdateFieldValidationHandler.$inject = [ 'form', 'validator' ];

packages/form-js-viewer/src/features/viewerCommands/index.js

@@ -0,0 +1,13 @@
+import commandModule from 'diagram-js/lib/command';
+
+import ViewerCommands from './ViewerCommands';
+
+export default {
+  __depends__: [
+    commandModule
+  ],
+  __init__: [ 'viewerCommands' ],
+  viewerCommands: [ 'type', ViewerCommands ]
+};
+
+export { ViewerCommands };

packages/form-js-viewer/src/render/components/FormField.js

@@ -1,4 +1,4 @@
-import { useContext } from 'preact/hooks';
+import { useCallback, useContext, useEffect, useMemo } from 'preact/hooks';
 
 import { get } from 'min-dash';
 
@@ -24,9 +24,11 @@ export default function FormField(props) {
   } = props;
 
   const formFields = useService('formFields'),
+        viewerCommands = useService('viewerCommands', false),
         form = useService('form');
 
   const {
+    initialData,
     data,
     errors,
     properties
@@ -44,6 +46,8 @@ export default function FormField(props) {
     throw new Error(`cannot render field <${field.type}>`);
   }
 
+  const initialValue = useMemo(() => get(initialData, field._path), [ initialData, field._path ]);
+
   const value = get(data, field._path);
 
   const fieldErrors = findErrors(errors, field._path);
@@ -55,6 +59,18 @@ export default function FormField(props) {
     properties.disabled || field.disabled || false
   );
 
+  const onBlur = useCallback(() => {
+    if (viewerCommands) {
+      viewerCommands.updateFieldValidation(field, value);
+    }
+  }, [ viewerCommands, field, value ]);
+
+  useEffect(() => {
+    if (viewerCommands && initialValue) {
+      viewerCommands.updateFieldValidation(field, initialValue);
+    }
+  }, [ viewerCommands, field, initialValue ]);
+
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
 
   if (hidden) {
@@ -69,6 +85,7 @@ export default function FormField(props) {
           disabled={ disabled }
           errors={ fieldErrors }
           onChange={ disabled || readonly ? noop : onChange }
+          onBlur={ disabled || readonly ? noop : onBlur }
           readonly={ readonly }
           value={ value } />
       </Element>

packages/form-js-viewer/src/render/components/form-fields/Checkbox.js

@@ -19,6 +19,7 @@ export default function Checkbox(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value = false
@@ -56,6 +57,7 @@ export default function Checkbox(props) {
         id={ prefixId(id, formId) }
         type="checkbox"
         onChange={ onChange }
+        onBlur={ onBlur }
         aria-describedby={ errorMessageId } />
     </Label>
     <Description description={ description } />

packages/form-js-viewer/src/render/components/form-fields/Checklist.js

@@ -1,4 +1,4 @@
-import { useContext } from 'preact/hooks';
+import { useContext, useRef } from 'preact/hooks';
 import useValuesAsync, { LOAD_STATES } from '../../hooks/useValuesAsync';
 import classNames from 'classnames';
 import { FormContext } from '../../context';
@@ -20,6 +20,7 @@ export default function Checklist(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value = [],
@@ -32,6 +33,8 @@ export default function Checklist(props) {
     validate = {}
   } = field;
 
+  const outerDivRef = useRef();
+
   const { required } = validate;
 
   const toggleCheckbox = (v) => {
@@ -50,6 +53,15 @@ export default function Checklist(props) {
     });
   };
 
+  const onCheckboxBlur = (e) => {
+
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+
+    onBlur();
+  };
+
   const {
     state: loadState,
     values: options
@@ -58,7 +70,7 @@ export default function Checklist(props) {
   const { formId } = useContext(FormContext);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
 
-  return <div class={ classNames(formFieldClasses(type, { errors, disabled, readonly })) }>
+  return <div class={ classNames(formFieldClasses(type, { errors, disabled, readonly })) } ref={ outerDivRef }>
     <Label
       label={ label }
       required={ required } />
@@ -81,6 +93,7 @@ export default function Checklist(props) {
               id={ prefixId(`${id}-${index}`, formId) }
               type="checkbox"
               onClick={ () => toggleCheckbox(v.value) }
+              onBlur={ onCheckboxBlur }
               aria-describedby={ errorMessageId } />
           </Label>
         );

packages/form-js-viewer/src/render/components/form-fields/Datetime.js

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useState, useEffect } from 'preact/hooks';
+import { useCallback, useContext, useMemo, useState, useEffect, useRef } from 'preact/hooks';
 
 import classNames from 'classnames';
 
@@ -23,6 +23,7 @@ export default function Datetime(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     onChange,
     readonly,
@@ -44,6 +45,7 @@ export default function Datetime(props) {
 
   const { required } = validate;
   const { formId } = useContext(FormContext);
+  const dateTimeGroupRef = useRef();
 
   const getNullDateTime = () => ({ date: new Date(Date.parse(null)), time: null });
 
@@ -56,6 +58,14 @@ export default function Datetime(props) {
   const useDatePicker = useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [ subtype ]);
   const useTimePicker = useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [ subtype ]);
 
+  const onDateTimeBlur = useCallback((e) => {
+    if (e.relatedTarget && dateTimeGroupRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+
+    onBlur();
+  }, [ onBlur ]);
+
   useEffect(() => {
 
     let { date, time } = getNullDateTime();
@@ -135,6 +145,7 @@ export default function Datetime(props) {
     id,
     label: dateLabel,
     collapseLabelOnEmpty: !timeLabel,
+    onDateTimeBlur,
     formId,
     required,
     disabled,
@@ -148,6 +159,7 @@ export default function Datetime(props) {
     id,
     label: timeLabel,
     collapseLabelOnEmpty: !dateLabel,
+    onDateTimeBlur,
     formId,
     required,
     disabled,
@@ -160,7 +172,7 @@ export default function Datetime(props) {
   };
 
   return <div class={ formFieldClasses(type, { errors: allErrors, disabled, readonly }) }>
-    <div class={ classNames('fjs-vertical-group') }>
+    <div class={ classNames('fjs-vertical-group') } ref={ dateTimeGroupRef }>
       { useDatePicker && <Datepicker { ...datePickerProps } /> }
       { useTimePicker && useDatePicker && <div class="fjs-datetime-separator" /> }
       { useTimePicker && <Timepicker { ...timePickerProps } /> }

packages/form-js-viewer/src/render/components/form-fields/Number.js

@@ -30,6 +30,7 @@ export default function Numberfield(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     value,
     readonly,
@@ -191,6 +192,7 @@ export default function Numberfield(props) {
           id={ prefixId(id, formId) }
           onKeyDown={ onKeyDown }
           onKeyPress={ onKeyPress }
+          onBlur={ onBlur }
 
           // @ts-ignore
           onInput={ (e) => setValue(e.target.value) }