diff --git a/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx b/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx index 6dab4a955e..ba4db2128e 100644 --- a/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx +++ b/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx @@ -47,7 +47,7 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => { const [fieldName, setFieldName] = useState(null); const [fieldSettings, setFieldSettings] = useState({}); - const canSubmit = fieldName && !isEmpty(fieldSettings); + const canSubmit = fieldName && !isEmpty(fieldSettings) && (fieldSettings.isValid !== false); const defaultType = dateSettings.dateTypes[0].value; const defaultFormat = dateSettings.dateFormats[defaultType][0]; diff --git a/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx index cd31e1a531..ffae76abce 100644 --- a/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx +++ b/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx @@ -4,6 +4,7 @@ import { Button, ToggleControl, } from '@wordpress/components'; +import { isEmpty } from 'lodash'; import PropTypes from 'prop-types'; import MailPoet from 'mailpoet'; import CustomFieldDelete from '../custom_field_delete.jsx'; @@ -26,12 +27,11 @@ const CustomFieldSettings = ({ mandatory: localMandatory, isChecked: localIsChecked, checkboxLabel: localCheckboxLabel, + isValid: !isEmpty(localCheckboxLabel), }), [localMandatory, localIsChecked, localCheckboxLabel]); useEffect(() => { - if (onChange) { - onChange(localData); - } + onChange(localData); }, [localData, onChange]); return ( @@ -101,7 +101,7 @@ CustomFieldSettings.defaultProps = { checkboxLabel: '', isDeleting: false, onCustomFieldDelete: null, - onChange: null, + onChange: () => {}, }; export default CustomFieldSettings;