Block Submission on Custom Error

[omikader]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.20.1

Current Behavior

I am building a custom field and I'd like to implement specific validation logic that should block the submission of the form if the validation criteria are not met.

I found an example in the docs which renders a custom error but it does not actually impact the form submission at all.

I also noticed that custom errors don't appear in the customValidate or transformErrors handler arguments though I expected them to be available.

Expected Behavior

I expected the errors to bubble up to the <Form> component with some way to block submission -- ideally using the extraErrorsBlockSubmit prop.

Steps To Reproduce

https://codesandbox.io/p/sandbox/jovial-hellman-m4vrsh

Environment

- OS: MacOS 15.3.2
- Node: 20.16.0
- yarn: 1.22.22

Anything else?

No response

[heath-freenome]

@omikader extraErrorsBlockSubmit only works when you pass non-empty extraErrors prop on the Form. Having your custom component adding errors during the onChange() flow only works during the onChange() process because they are not part of the official validation chain used by the Form (via the validator-ajv8). When the submit button is pushed, the validation is done again. If you want this to work, you'll actually want to move your validation code into the customValidate() function which is run during the validation step. Sorry if that is confusing. This is not a bug. We are updating our documentation to be more clear.

[omikader]

Hi @heath-freenome! Thanks for the quick response and I appreciate you moving so quickly to clarify the documentation.

I did end up going the customValidate route but I would love to have a built-in way to move the validation logic directly into the custom template/field implementation instead of having it at the Form level.

We have several custom fields that each have their own bespoke business validation logic and so sharing handler means we'd need to do some complex conditioning on a combination of the formData and uiSchema. The example below is a little trivial but it illustrates the idea.

const handleCustomValidate = (formData, errors, uiSchema) => {
  const options = getUiOptions(uiSchema);
  const builder = new ErrorSchemaBuilder(errors);

  if (options.field === "CustomFieldFoo" && isPrime(formData.foo)) {
    builder.addErrors("'foo' must be composite!");
  } else if (options.field === "CustomFieldBar" && someOtherCondition(formData)) {
    builder.addErrors("so and so...");
  }

  return builder.ErrorSchema;
};

[heath-freenome]

@omikader IF you made the validation logic external functions, you could then include them into your custom components as well as your custom validate

[omikader]

Yep, definitely true! I'll go ahead and close this since the documentation has been updated. Thanks again @heath-freenome