How to programmatically trigger form validation?

[mplis-jetsetter]

Right now, I'm aware of two ways to trigger validation: clicking the Submit button that is a child component of the Form and setting liveValidate to true. Is there any other way to trigger form validation, for example every N seconds, upon clicking one of many buttons on a page, or only once when the page loads?

edit: It'd also be great to tie into validation events, like run some custom code when the form fails validation.

[n1k0]

Nope, we don't currently support these use cases, nor do we plan to in a near future.

[chriswhong]

+1 for programmatic triggering of validation. I populating the form with a user's saved information, and would like to be able to indicate whether what they have entered so far is valid.

[n1k0]

@chriswhong if you fill a form with existing formData they should be validated immediately, don't they? I'm just back from vacations so that may just be broken or has never been implemented tbh, but mounting a Form with existing formData should definitely validate them.

[rgbkrk]

I'm wondering about this as well, mostly so that I can validate outside of just an overridden submit button that's a child of the Form.

[glasserc]

@rgbkrk Could you elaborate on your use case? Is it related to #155?

If someone commenting on this issue could comment on whether merely providing the input as the formData prop causes validation or not, that could be helpful.

I believe triggering a JSONSchema validation of the current form data is within the purview of this library, but supporting this use case isn't an immediate priority for us. I'd be interested in reviewing a PR.

[marsch]

i just have an issue on liveValidate=true it triggers validation also on empty-forms - think we should have a touched state for better error handling here

[rgbkrk]

@glasserc the issue for me is that if you write a custom submit (not actually using submit), the validation never triggers unless you set it to "always" check.

[marsch]

@rgbkrk what you mean by always check?

[marsch]

@rgbkrk bear in mind that submit is called after valiation is fired

[glasserc]

@marsch I agree that liveValidate on a "fresh" form, or even on "fresh" fields, isn't optimal, at least not for all use cases, but I think that's a separate issue from this bug. I've opened #512 to track the feature you mention.

[ostenning]

This seems like a pretty straight forward thing to implement and would help those who need to integrate this library into more complex scenarios.

[epicfaace]

@osphost right, are you interested in implementing this in a PR?

[karlitos]

Hello, I stumbled upon this issues, when I was searching for a way to trigger validation programatically. I have a similar issue as @chriswhong

+1 for programmatic triggering of validation. I populating the form with a user's saved information, and would like to be able to indicate whether what they have entered so far is valid.

I noticed, that if populate an empty form with completely irrelevant data, nothing happens (which is right) but from user perspective it looks like a bug.

Currently, this can be done creating a second AJV validator and validating the data before I set them as a formData but it would be very helpful if the Form would also expose its validator function or the AJV instance used for this.

For manual validation - I suggest, that any parameters passed to the Forms submit() function would passed to through to the submit-handler or attached to its custom "submit" event. This way I could do:

export default function App()
{
    ...
    const formRed = useRef;
    ...

    const handleFormsubmit = (formData, evt, validateOnly) => {
        if(validateOnly) { return ;}
        // do something with the formData
        ...
    };

    formRef.current.submit(true); // validate only
    formRef.current.submit(); // validate and submit
    ...
```
 to trigger validation programatically

[karlitos]

After looking into the code a little bit I found out, that it is indeed possible to access the Forms validate method like this:

export default function App()
{
    const [data , setData] = useState();
    ...
    const formRed = useRef;
    ...

    const handleLoadFormData = () => {
        // some call returning the data
        getFormData().then((data) => {
            const {errorSchema, errors} = cvForm.current.validate(result.data, schema);
                console.log('VALIDATION', errors);
                setData(result.data);
        }).catch((err) = > { // deal with rejected promise})
       ...
    };

    return <Form schema={schema}
              formData={data}
              ref={cvForm} />
}
  

This actually doesn't display the usual list of errors, but it it shouldn't be that hard to replicate the current implementation

[heath-freenome]

Fixed in the v5 beta.9 - https://react-jsonschema-form.readthedocs.io/en/latest/usage/validation/#validate-form-programmatically

[GavinJaynes]

Hi, great work on RJSF and thank you for the continuing updates and support.

I'm trying to validate programmatically using V5 beta.13 but I get type errors when using ref on the Form.

Replication here https://stackblitz.com/edit/react-ts-imp21p?file=App.tsx

I did my test to replicate here, however, Stackblitz breaks when I add https://www.npmjs.com/package/@rjsf/validator-ajv8 so I have just passed an empty validator, nonetheless, you can see the type error on the ref.

Might be a regression from #2186

Error produces when using ref.

 TS2769: No overload matches this call.
  Overload 1 of 2, '(props: FormProps<any, RJSFSchema, any>, context?: any): ReactElement<any, any> | Component<FormProps<any, RJSFSchema, any>, any, any> | null', gave the following error.
    Type '{ children: Element; ref: RefObject<unknown>; id: string; validator: ValidatorType<any, RJSFSchema>; disabled: boolean; schema: RJSFSchema; formData: ContentBodyDTO; onChange: (e: IChangeEvent<...>) => void; widgets: RegistryWidgetsType<...>; templates: { ...; }; }' is not assignable to type 'IntrinsicAttributes & FormProps<any, RJSFSchema, any>'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & FormProps<any, RJSFSchema, any>'.
  Overload 2 of 2, '(props: PropsWithChildren<FormProps<any, RJSFSchema, any>>, context?: any): ReactElement<any, any> | Component<FormProps<any, RJSFSchema, any>, any, any> | null', gave the following error.
    Type '{ children: Element; ref: RefObject<unknown>; id: string; validator: ValidatorType<any, RJSFSchema>; disabled: boolean; schema: RJSFSchema; formData: ContentBodyDTO; onChange: (e: IChangeEvent<...>) => void; widgets: RegistryWidgetsType<...>; templates: { ...; }; }' is not assignable to type 'IntrinsicAttributes & FormProps<any, RJSFSchema, any> & { children?: ReactNode; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & FormProps<any, RJSFSchema, any> & { children?: ReactNode; }'.