feat: add validation fn for additionalFields

README.md

@@ -1,6 +1,6 @@
 # volto-block-form
 
-Volto addon which adds a customizable form using a block.  
+Volto addon which adds a customizable form using a block.
 Intended to be used with [collective.volto.formsupport](https://github.com/collective/collective.volto.formsupport).
 
 Install with mrs-developer (see [Volto docs](https://docs.voltocms.com/customizing/add-ons/)) or with:
@@ -52,13 +52,24 @@ config.blocks.blocksConfig.form.additionalFields.push({
     intl.formatMessage(messages.customFieldLabel) ||
     'Label for field type select, translation obj or string',
   component: MyCustomWidget,
+  isValid: (formData) => true,
 });
 ```
 
-The widget should have the following firm:
+The widget component should have the following firm:
 
 ```js
-({ id, name, title, description, required, onChange, value, isDisabled, invalid }) => ReactElement;
+({
+  id,
+  name,
+  title,
+  description,
+  required,
+  onChange,
+  value,
+  isDisabled,
+  invalid,
+}) => ReactElement;
 ```
 
 ## Static fields

package.json

@@ -6,7 +6,7 @@
   "repository": "https://github.com/collective/volto-form-block",
   "bugs": "https://github.com/collective/volto-form-block/issues",
   "author": "Nicola Zambello",
-  "homepage": "https://github.com/collective/volto-rss-block#readme",
+  "homepage": "https://github.com/collective/volto-form-block#readme",
   "license": "MIT",
   "keywords": [
     "volto-addon",

src/components/Field.jsx

@@ -39,6 +39,7 @@ const Field = ({
   isOnEdit,
   valid,
   disabled = false,
+  formHasErrors = false,
 }) => {
   const intl = useIntl();
 
@@ -187,6 +188,7 @@ const Field = ({
               onChange={onChange}
               value={value}
               isDisabled={disabled}
+              formHasErrors={formHasErrors}
               invalid={isInvalid().toString()}
               {...(isInvalid() ? { className: 'is-invalid' } : {})}
             />,
@@ -211,6 +213,7 @@ Field.propTypes = {
   field_type: PropTypes.string,
   input_values: PropTypes.any,
   value: PropTypes.any,
+  formHasErrors: PropTypes.bool,
   onChange: PropTypes.func,
 };
 

src/components/Form.jsx

@@ -6,6 +6,8 @@ import { submitForm } from '../actions';
 import { getFieldName } from './utils';
 import FormView from 'volto-form-block/components/FormView';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   formSubmitted: {
     id: 'formSubmitted',
@@ -92,9 +94,21 @@ const Form = ({ data, id, path }) => {
     let v = [];
     data.subblocks.forEach((subblock, index) => {
       let name = getFieldName(subblock.label);
+      let additionalField =
+        config.blocks.blocksConfig.form.additionalFields?.filter(
+          (f) => f.id === name && f.isValid !== undefined,
+        )?.[0] ?? null;
       if (
         subblock.required &&
-        (!formData[name] || formData[name]?.length === 0)
+        additionalField &&
+        !additionalField.isValid(formData, name)
+      )
+        v.push(name);
+      else if (
+        subblock.required &&
+        (!formData[name] ||
+          formData[name]?.value?.length === 0 ||
+          JSON.stringify(formData[name]?.value ?? {}) === '{}')
       ) {
         v.push(name);
       }

src/components/FormView.jsx

@@ -111,6 +111,7 @@ const FormView = ({
                         onChange={() => {}}
                         disabled
                         valid
+                        formHasErrors={formErrors.length > 0}
                       />
                     </Grid.Column>
                   </Grid.Row>