Adding validation for a button click

[linesh98]

I’m new to this form builder.
I am using the form builder and have created a few sample forms. I'm trying to integrate it with an example application and have added validation rules in the form builder.

I placed the submit button outside the form designer, so it’s not directly connected to the form builder. The button was created in my sample application. My requirement is that whenever I click "submit," the validation should be triggered. How can I handle this situation? Any sample code would also be helpful.

[ashalugin]

@linesh98

You can use the viewerRef property: https://formengine.io/documentation/api-reference/@react-form-builder/core/interfaces/FormViewerProps#viewerref

import {useRef} from 'react';
import type {IFormViewer} from '@react-form-builder/core'
// ...

export const FormViewerExample = () => {
  const viewerRef = useRef<IFormViewer>(null)
  // ...

  return (
    <FormViewer view={view}
                getForm={getForm} onFormDataChange={onFormDataChanged}
                viewerRef={viewerRef}
                initialData={initialData} actions={customActions}/>
  )
}

let viewer = viewerRef.current
if (viewer) {
  const formData = viewer.formData as IFormData
  await await formData.validate()
// or const validation = await formData.getValidationResult()
}

https://formengine.io/documentation/form-data#accessing-form-data-via-viewerref