Has livevalidate changed how it works rjsfv4 to rjsfv6

[JBSopra]

Prerequisites

• I have read the documentation

What theme are you using?

mui

What is your question?

It appears live validate works differently to how it did before in v4. We have a review dialog of the form where we set everything to read only with a submit button at the bottom. Before, we had the errors from live validate already on the first tab of the form. Now, I have to go to the final section of the form in order for the live validate to appear. Is this something that is expected or is this something that may have changed with the changes to the function?

Any pointers to how best I can get live validate to prompt on the open of the form inside the dialog would be appreciated to!

[nickgros]

In v6 it was changed to not validate before a user change (in #4815 to partially address #512).

When you first load the form, you could validate programmatically to immediately showing validation errors. From there, liveValidate will continue to work as expected.

This is mentioned in the v6 migration guide:

A bug was fixed such that live validation will no longer be triggered on the data provided during the initial rendering of the Form. If you require that your initial data have errors shown, then you can programmatically validate it after the initial render.

[JBSopra]

That makes a lot of sense regarding the reason why. I apologise for missing that part, and will check that out on monday.

Thank you for the efforts on improving and maintaining this library

[heath-freenome]

@JBSopra Let us know whether our recommendation for running live validate programmatically solved your issue

[JBSopra]

Hello,

yes had to do the below to get it to trigger:

// Trigger validation once the dialog is open so errors render immediately.
  useLayoutEffect(() => {
    if (!props.openReview) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      formRef.current?.validateForm?.();
    }, 0);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [props.openReview]);

let me know if you need another issue raised for my other question -
Is there an issue that is raised or known about where the required values within an object don't get validated without also having the object required?

[heath-freenome]

@JBSopra Can you use the playground to give us an example of what you are describing?

[JBSopra]

Unfortunately not, as our reviewing component is a separate component to the main form, it's rendering in a different way, I'm using a useRef:

type RjsfFormRef = {
  validateForm?: () => boolean;
};

const formRef = useRef<RjsfFormRef | null>(null);

I then have the code which is a useLayoutEffect so it renders before the user sees it, useEffect meant it appeared after loading

We have a formView component which is just the main MUIform object. In this instance it is a copy of the main form but is read only and no changes can be made

 <FormView
    formId={props.formId}
    propertyId={props.propertyId}
    isError={props.isError}
    isScrollable={true}
    schema={props.schema}
    uiSchema={props.uiSchema}
    startData={props.formData}
    toggleRerender={false}
    liveValidate={true}
    onError={onError}
    onChange={() => {}}
    readOnly={readOnly}
    ref={formRef as any}
/>

[heath-freenome]

@JBSopra Then yes, please raise a new issue for your other question