diff --git a/README.md b/README.md index fae9aee..54436da 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index e235c77..52b909e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Field.jsx b/src/components/Field.jsx index 1260148..b8c166c 100644 --- a/src/components/Field.jsx +++ b/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, }; diff --git a/src/components/Form.jsx b/src/components/Form.jsx index 8888103..2661651 100644 --- a/src/components/Form.jsx +++ b/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); } diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx index 9410e40..8981106 100644 --- a/src/components/FormView.jsx +++ b/src/components/FormView.jsx @@ -111,6 +111,7 @@ const FormView = ({ onChange={() => {}} disabled valid + formHasErrors={formErrors.length > 0} />