React-jsonschema-form: 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:

````javascript
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