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, jsonSchema: any,
formDataToCheck: any, formDataToCheck: any,
errors: 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 // recurse through all nested properties as well
let formDataToSend = formDataToCheck[propertyKey]; let formDataToSend = formDataToCheck[propertyKey];
if (formDataToSend) { if (formDataToSend) {
@ -179,7 +210,11 @@ export default function CustomForm({
if (index in errorsToSend) { if (index in errorsToSend) {
errorsToSend = errorsToSend[index]; 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) => { const customValidate = (formDataToCheck: any, errors: any) => {
return getFieldsWithDateValidations(schema, formDataToCheck, errors); return checkFieldsWithCustomValidations(schema, formDataToCheck, errors);
}; };
return ( return (

View File

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

View File

@ -42,13 +42,6 @@ function CheckboxWidget(props: WidgetProps) {
rawErrors 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. // 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 // 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. // so add fuzz to the id to ensure it is unique.