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:
jasquat 2023-09-19 09:10:54 -04:00 committed by GitHub
parent ce130f4539
commit 5e19d68d49
3 changed files with 39 additions and 11 deletions

View File

@ -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 (

View File

@ -122,7 +122,7 @@ export default function ReactFormBuilder({
postBody: submission,
});
},
[processModelId]
[processModelId, fileName]
);
const createFiles = (base: string) => {

View File

@ -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.