如何以编程方式调用Formio表单的onSubmit事件？

原生JS场景 #

• 初始化Formio表单时保留实例引用：

// 替换为你的表单容器ID和配置
const formElement = document.getElementById('formio-container');
const formConfig = {
  src: 'https://your-form-endpoint' // 或直接传入表单JSON配置
};

// 初始化表单并保存实例
const formInstance = new Formio(formElement, formConfig);
formInstance.render();

• 给自定义按钮绑定点击事件，调用实例的submit()方法：

// 替换为你的自定义按钮ID
document.getElementById('custom-submit-btn').addEventListener('click', async () => {
  try {
    // 触发提交，自动执行校验、onSubmit逻辑及后端流程
    const submissionResult = await formInstance.submit();
    console.log('提交成功', submissionResult);
  } catch (error) {
    // 捕获校验失败或提交异常
    console.error('提交失败', error);
  }
});

React场景（react-formio库） #

• 通过useRef获取Formio组件实例，调用submit()方法：

import React, { useRef } from 'react';
import { Formio } from 'react-formio';

export default function CustomForm() {
  const formRef = useRef(null);

  const handleCustomSubmit = async () => {
    if (!formRef.current) return;
    try {
      const submission = await formRef.current.submit();
      console.log('提交完成', submission);
    } catch (err) {
      console.error('提交异常', err);
    }
  };

  return (
    <div>
      <Formio
        ref={formRef}
        src="https://your-form-url"
        onSubmit={(submission) => console.log('Formio内置onSubmit触发', submission)}
      />
      <button onClick={handleCustomSubmit}>自定义提交</button>
    </div>
  );
}

Iframe嵌入场景 #

若表单通过iframe嵌入，需用postMessage跨窗口通信触发提交：

• 父页面代码：

const formIframe = document.getElementById('formio-iframe');
document.getElementById('custom-btn').addEventListener('click', () => {
  formIframe.contentWindow.postMessage({ type: 'triggerFormSubmit' }, '*');
});

• Iframe内的Formio页面监听消息并触发提交：

window.addEventListener('message', (event) => {
  if (event.data?.type === 'triggerFormSubmit') {
    if (window.Formio?.currentForm) {
      window.Formio.currentForm.submit();
    }
  }
});

说明：submit()方法会完全模拟Formio自带提交按钮的行为，包括字段校验、触发配置的onSubmit事件、执行后端提交流程等，校验不通过时会自动抛出错误并在表单上显示提示。

内容的提问来源于stack exchange，提问作者user23662713