Improve validation on JSONField fields

packages/volto/news/6576.bugfix

@@ -0,0 +1 @@
+Improve the usability of the ObjectBrowser when inputting a manual value, checking it on blur, and adding a local validator. @sneridagh

packages/volto/src/components/manage/Form/Form.jsx

@@ -585,14 +585,34 @@ class Form extends Component {
             title={this.props.intl.formatMessage(messages.error)}
             content={
               <ul>
-                {Object.keys(errors).map((err, index) => (
-                  <li key={index}>
-                    <strong>
-                      {this.props.schema.properties[err].title || err}:
-                    </strong>{' '}
-                    {errors[err]}
-                  </li>
-                ))}
+                {Object.keys(errors).map((err, index) => {
+                  return (
+                    <React.Fragment key={index}>
+                      {typeof errors[err] === 'object' &&
+                      !Array.isArray(errors[err]) ? (
+                        Object.keys(errors[err]).map((nestedErr, index) => {
+                          return (
+                            <li key={index}>
+                              <strong>
+                                {this.props.schema.properties[err].title ||
+                                  errors[err][nestedErr]}
+                                :
+                              </strong>{' '}
+                              {`[${nestedErr}]: ${errors[err][nestedErr]}`}
+                            </li>
+                          );
+                        })
+                      ) : (
+                        <li key={index}>
+                          <strong>
+                            {this.props.schema.properties[err].title || err}:
+                          </strong>{' '}
+                          {errors[err]}
+                        </li>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
               </ul>
             }
           />,

packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -16,10 +16,10 @@ import { Image, Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
-  isUrl,
   normalizeUrl,
   removeProtocol,
 } from '@plone/volto/helpers/Url/Url';
+import { urlValidator } from '@plone/volto/helpers/FormValidation/validators';
 import { searchContent } from '@plone/volto/actions/search/search';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -102,6 +102,7 @@ export class ObjectBrowserWidgetComponent extends Component {
   state = {
     manualLinkInput: '',
     validURL: false,
+    errors: [],
   };
 
   constructor(props) {
@@ -230,7 +231,16 @@ export class ObjectBrowserWidgetComponent extends Component {
 
   validateManualLink = (url) => {
     if (this.props.allowExternals) {
-      return isUrl(url);
+      const error = urlValidator({
+        value: url,
+        formatMessage: this.props.intl.formatMessage,
+      });
+      if (error && url !== '') {
+        this.setState({ errors: [error] });
+      } else {
+        this.setState({ errors: [] });
+      }
+      return !Boolean(error);
     } else {
       return isInternalURL(url);
     }
@@ -341,9 +351,14 @@ export class ObjectBrowserWidgetComponent extends Component {
             onChange(id, this.props.return === 'single' ? null : []);
           };
 
+    const props = {
+      ...this.props,
+      error: this.props.error.concat(this.state.errors),
+    };
+
     return (
       <FormFieldWrapper
-        {...this.props}
+        {...props}
         className={description ? 'help text' : 'text'}
       >
         <div
@@ -372,6 +387,7 @@ export class ObjectBrowserWidgetComponent extends Component {
               items.length === 0 &&
               this.props.mode !== 'multiple' && (
                 <input
+                  onBlur={this.onSubmitManualLink}
                   onKeyDown={this.onKeyDownManualLink}
                   onChange={this.onManualLinkInput}
                   value={this.state.manualLinkInput}

packages/volto/src/components/manage/Widgets/ObjectListWidget.jsx

@@ -75,6 +75,7 @@ const ObjectListWidget = (props) => {
     value = [],
     onChange,
     schemaExtender,
+    error = {},
   } = props;
   const [localActiveObject, setLocalActiveObject] = React.useState(
     props.activeObject ?? value.length - 1,
@@ -243,6 +244,7 @@ const ObjectListWidget = (props) => {
                         );
                         onChange(id, newvalue);
                       }}
+                      errors={error}
                     />
                   </Segment>
                 </Accordion.Content>

packages/volto/src/helpers/FormValidation/FormValidation.jsx

@@ -214,6 +214,31 @@ const validateFieldsPerFieldset = (
       );
     }
 
+    // Validation per JSONField type with own schema
+    let jsonFieldErrors = [];
+    if (
+      field.factory === 'JSONField' &&
+      field.widgetOptions?.frontendOptions?.schema
+    ) {
+      const JSONFieldSchema = config.getUtility({
+        name: fieldId,
+        type: 'schema',
+        dependencies: { fieldName: fieldId },
+      });
+
+      jsonFieldErrors = validateFieldsPerFieldset(
+        JSONFieldSchema.method({
+          intl: {
+            formatMessage: () => {},
+          },
+          formData: {},
+        }),
+        fieldData || {},
+        formatMessage,
+        touchedField,
+      );
+    }
+
     const mergedErrors = [
       ...specificFieldErrors,
       ...fieldErrors,
@@ -232,6 +257,10 @@ const validateFieldsPerFieldset = (
         ...blockTypeFieldErrors,
       ];
     }
+
+    if (!isEmpty(jsonFieldErrors)) {
+      errors[fieldId] = { ...jsonFieldErrors };
+    }
   });
 
   return errors;

packages/volto/src/helpers/FormValidation/FormValidation.test.js

@@ -988,5 +988,55 @@ describe('FormValidation', () => {
         customField: [messages.isValidURL.defaultMessage],
       });
     });
+
+    it('JSONField - Basic Required', () => {
+      let JSONSchemaField = ({ intl }) => ({
+        properties: {
+          innerJSONField: {
+            title: 'Default field',
+            description: '',
+          },
+        },
+        required: ['innerJSONField'],
+      });
+      config.registerUtility({
+        type: 'schema',
+        dependencies: { fieldName: 'customJSONSchemaField' },
+        method: JSONSchemaField,
+      });
+      let newSchema = {
+        properties: {
+          ...schema.properties,
+          customField: {
+            title: 'Default field',
+            description: '',
+          },
+          customJSONSchemaField: {
+            factory: 'JSONField',
+            title: 'JSON Field',
+            widgetOptions: {
+              frontendOptions: {
+                schema: 'customJSONSchemaField',
+              },
+            },
+          },
+        },
+        required: [],
+      };
+
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema: newSchema,
+          formData: {
+            otherField: 'test',
+          },
+          formatMessage,
+        }),
+      ).toEqual({
+        customJSONSchemaField: {
+          innerJSONField: [messages.required.defaultMessage],
+        },
+      });
+    });
   });
 });