create a custom validation for checkboxes instead of trying to set the value to undefined (#501)
Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
parent
8eb93802aa
commit
86096d6d97
|
@ -144,7 +144,29 @@ export default function CustomForm({
|
|||
}
|
||||
};
|
||||
|
||||
const getFieldsWithDateValidations = (
|
||||
// a required boolean field (checkbox) with default value of false
|
||||
// will not automatically fail validation. only undefined values will
|
||||
// trigger the validation by default so force it. this is to support things
|
||||
// like "I have read the EULA" type checkbox on a form.
|
||||
const checkBooleanField = (
|
||||
formDataToCheck: any,
|
||||
propertyKey: string,
|
||||
errors: any,
|
||||
jsonSchema: any
|
||||
) => {
|
||||
if (
|
||||
jsonSchema.required &&
|
||||
jsonSchema.required.includes(propertyKey) &&
|
||||
formDataToCheck[propertyKey] !== true
|
||||
) {
|
||||
// keep this error the same as the default message
|
||||
errors[propertyKey].addError(
|
||||
`must have required property '${propertyKey}'`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const checkFieldsWithCustomValidations = (
|
||||
jsonSchema: any,
|
||||
formDataToCheck: any,
|
||||
errors: any
|
||||
|
@ -168,6 +190,15 @@ export default function CustomForm({
|
|||
);
|
||||
}
|
||||
|
||||
if (propertyMetadata.type === 'boolean') {
|
||||
checkBooleanField(
|
||||
formDataToCheck,
|
||||
propertyKey,
|
||||
errors,
|
||||
jsonSchemaToUse
|
||||
);
|
||||
}
|
||||
|
||||
// recurse through all nested properties as well
|
||||
let formDataToSend = formDataToCheck[propertyKey];
|
||||
if (formDataToSend) {
|
||||
|
@ -179,7 +210,11 @@ export default function CustomForm({
|
|||
if (index in errorsToSend) {
|
||||
errorsToSend = errorsToSend[index];
|
||||
}
|
||||
getFieldsWithDateValidations(propertyMetadata, item, errorsToSend);
|
||||
checkFieldsWithCustomValidations(
|
||||
propertyMetadata,
|
||||
item,
|
||||
errorsToSend
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -188,7 +223,7 @@ export default function CustomForm({
|
|||
};
|
||||
|
||||
const customValidate = (formDataToCheck: any, errors: any) => {
|
||||
return getFieldsWithDateValidations(schema, formDataToCheck, errors);
|
||||
return checkFieldsWithCustomValidations(schema, formDataToCheck, errors);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -122,7 +122,7 @@ export default function ReactFormBuilder({
|
|||
postBody: submission,
|
||||
});
|
||||
},
|
||||
[processModelId]
|
||||
[processModelId, fileName]
|
||||
);
|
||||
|
||||
const createFiles = (base: string) => {
|
||||
|
|
|
@ -42,13 +42,6 @@ function CheckboxWidget(props: WidgetProps) {
|
|||
rawErrors
|
||||
);
|
||||
|
||||
// if the default value is false then set the value to undefined
|
||||
// so it will fail validation. in practice, there is no other
|
||||
// way that this prop could have the value false. it has to be the default.
|
||||
if (value === false) {
|
||||
onChange(undefined);
|
||||
}
|
||||
|
||||
// if the parent rjsf schema is not of type "object", then rjsf sends "root" through as the id.
|
||||
// this creates issues with the carbon checkbox where it will not accept any clicks to the checkbox
|
||||
// so add fuzz to the id to ensure it is unique.
|
||||
|
|
Loading…
Reference in New Issue