react-jsonschema-form: How to programmatically trigger form validation?

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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 10
  • Comments: 16 (4 by maintainers)

Most upvoted comments

+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.

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

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

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