Add custom field validation registered by user

examples/getstarted/src/plugins/mycustomfields/admin/src/index.js

@@ -1,3 +1,4 @@
+import * as yup from 'yup';
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginId from './pluginId';
 import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
@@ -48,7 +49,7 @@ export default {
                 id: 'color-picker.color.format.label',
                 defaultMessage: 'Color format',
               },
-              name: 'options.format',
+              name: 'options.color-picker.format',
               type: 'select',
               value: 'hex',
               options: [
@@ -109,6 +110,14 @@ export default {
               ],
             },
           ],
+          validator: args => ({
+            'color-picker': yup.object().shape({
+              format: yup.string().required({
+                id: 'options.color-picker.format.error',
+                defaultMessage: 'The color format is required',
+              }),
+            }),
+          }),
         },
       },
     ]);

packages/core/content-type-builder/admin/src/components/FormModal/forms/index.js

@@ -8,8 +8,39 @@ import { dynamiczoneForm } from '../dynamicZone';
 import { nameField } from '../attributes/nameField';
 import addItemsToFormSection from './utils/addItemsToFormSection';
 
+const getUsedAttributeNames = (attributes, schemaData) => {
+  return attributes
+    .filter(({ name }) => {
+      return name !== schemaData.initialData.name;
+    })
+    .map(({ name }) => name);
+};
+
 const forms = {
   customField: {
+    schema({
+      schemaAttributes,
+      attributeType,
+      customFieldValidator,
+      reservedNames,
+      schemaData,
+      ctbFormsAPI,
+    }) {
+      const usedAttributeNames = getUsedAttributeNames(schemaAttributes, schemaData);
+
+      const attributeShape = attributeTypes[attributeType](
+        usedAttributeNames,
+        reservedNames.attributes
+      );
+
+      return ctbFormsAPI.makeCustomFieldValidator(
+        attributeShape,
+        customFieldValidator,
+        usedAttributeNames,
+        reservedNames.attributes,
+        schemaData
+      );
+    },
     form: {
       base({ customField }) {
         // Default section with required name field
@@ -42,13 +73,9 @@ const forms = {
       options,
       extensions
     ) {
+      // Get the attributes object on the schema
       const attributes = get(currentSchema, ['schema', 'attributes'], []);
-
-      const usedAttributeNames = attributes
-        .filter(({ name }) => {
-          return name !== options.initialData.name;
-        })
-        .map(({ name }) => name);
+      const usedAttributeNames = getUsedAttributeNames(attributes, options);
 
       try {
         let attributeShape = attributeTypes[attributeType](

packages/core/content-type-builder/admin/src/components/FormModal/index.js

@@ -338,6 +338,15 @@ const FormModal = () => {
         get(allDataSchema, [...pathToSchema, 'uid'], null),
         ctbFormsAPI
       );
+    } else if (isCreatingCustomFieldAttribute) {
+      schema = forms.customField.schema({
+        schemaAttributes: get(allDataSchema, [...pathToSchema, 'schema', 'attributes'], []),
+        attributeType: customField.type,
+        reservedNames,
+        schemaData: { modifiedData, initialData },
+        ctbFormsAPI,
+        customFieldValidator: customField.options.validator,
+      });
 
       // Check for validity for creating a component
       // This is happening when the user creates a component "on the fly"
@@ -903,10 +912,12 @@ const FormModal = () => {
   }).sections;
 
   const baseFormInputNames = getFormInputNames(baseForm);
+
   const advancedFormInputNames = getFormInputNames(advancedForm);
   const doesBaseFormHasError = Object.keys(formErrors).some(key =>
     baseFormInputNames.includes(key)
   );
+
   const doesAdvancedFormHasError = Object.keys(formErrors).some(key =>
     advancedFormInputNames.includes(key)
   );

packages/core/content-type-builder/admin/src/utils/formAPI.js

@@ -68,11 +68,13 @@ const formsAPI = {
           },
         };
       }
+
       formType[field].validators.push(validator);
       formType[field].form.advanced.push(advanced);
       formType[field].form.base.push(base);
     });
   },
+
   getAdvancedForm(target, props = null) {
     const sectionsToAdd = get(this.types, [...target, 'form', 'advanced'], []).reduce(
       (acc, current) => {
@@ -86,6 +88,10 @@ const formsAPI = {
     return sectionsToAdd;
   },
 
+  makeCustomFieldValidator(initShape, validator, ...validatorArgs) {
+    return initShape.shape({ options: yup.object().shape(validator(validatorArgs)) });
+  },
+
   makeValidator(target, initShape, ...args) {
     const validators = get(this.types, [...target, 'validators'], []);