Creating a SubmitButton Widget which is disabled till all data is valid

[ShaswatPrabhat]

Prerequisites

• [X] I have read the documentation

What theme are you using?

validator-ajv8

What is your question?

Hi team,

Thank you for the amazing library. We have a use case where we are using our own design system to integrate our forms.

For most use cases we do not want Submit button enabled till valid data has been entered, Please let me know how this can be achieved and integrated into SubmitButtonWidget .

[nickgros]

If you have liveValidate turned on, you can get the errors state data out of the onChange callback event.

You can also provide a custom submit button as a child of the Form component.

Here's a CodeSandbox example: https://codesandbox.io/p/sandbox/rjsf-v5-3865-q935qh?file=/src/App.tsx

Hopefully that's enough to help you accomplish this. You might have to do something like programmatic validation to initialize the state properly.

It might make sense to add this as a first-class feature, though, so if you're willing to create a PR we'd be happy to review it.

[ShaswatPrabhat]

Sure! Willing to add a PR but will need some context. One idea I was thinking of was to pass errors to SubmitButtonProps. That way the widget can contain this logic. Please let me know if that sounds okay.

[heath-freenome]

You could also use the uiOptions to pass disabled to the SubmitButton:

uiSchema = {
  submitButtonOptions: {
    disabled: true,
  },
};