Submit Action
The submit action is the primary completion trigger for a form. It runs validation, and if the form is valid, calls the onSubmit callback provided to the FormRenderer. The button shows a loading spinner during the async callback.
Submission Pipeline
User Clicks Submit
The button enters loading state. All form controls become temporarily non-interactive.
Validation Runs
formEngine.validate() is called. All fields are validated synchronously first, then async validators run in parallel. If any field is invalid, the pipeline stops here.
Validation Failed?
Inline error messages appear below each invalid field. An optional summary banner appears at the top. The button exits loading state. The user must fix errors and re-click.
onSubmit Callback Called
props.onSubmit(formValues, submissionMetadata) is awaited. Your callback receives the full values object and metadata (formId, tenantId, timestamp).
Success or Error
If the callback resolves, the success flow runs (toast, navigation). If it throws, the error flow runs (error message, button re-enables).
Schema Example
{
"type": "submit",
"label": "Submit Application",
"variant": "primary",
"icon": "paper-plane",
"order": 10,
"config": {
"validateBeforeSubmit": true,
"showConfirmDialog": true,
"confirmMessage": "Submit this application? You cannot edit it after submission.",
"successMessage": "Application submitted successfully!"
}
}The onSubmit Callback
The onSubmit prop on FormRenderer receives the form data:
import { FormRenderer } from '@atlas-forms/player-components-react';
function MyFormPage() {
const handleSubmit = async (
values: Record<string, any>,
metadata: FormSubmissionMetadata
) => {
// metadata: { formId, tenantId, submittedAt, userId }
await api.post('/submissions', { values, metadata });
// Navigate away or show confirmation
navigate('/success');
};
return (
<FormRenderer
schema={formSchema}
mode="edit"
onSubmit={handleSubmit}
onError={(err) => toast.error(err.message)}
/>
);
}Confirm Dialog
Setting showConfirmDialog: true inserts an intermediate confirmation step before submission. This is recommended for forms that create irreversible records (financial submissions, approvals).
Disabling Submit Until Valid
Use disabledRule to dynamically disable the submit button based on form state:
{
"type": "submit",
"label": "Submit",
"variant": "primary",
"disabledRule": "!values['terms-accepted']"
}This disables the submit button until the user checks the terms-accepted checkbox.
autoValidate: true on FormRenderer, validation runs on every field change — so errors appear before the user clicks Submit. The submit action still re-validates at submission time regardless of autoValidate.