Docs

v.Latest
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference

The before submit function allows you to run a function on the frontend before the form is submitted to the backend and optionally modify the values of a document.

Definition

import { TinaCMS, Form } from 'tinacms'
type BeforeSubmitFunction = (args: {
values: Record<string, unknown>
cms: TinaCMS
form: Form
}) => Promise<void | Record<string, unknown>>

Examples

Adding a last updated field

// tina/config.{ts.js}
export default defineConfig({
schema: {
collections: [
{
ui: {
// Example of beforeSubmit
beforeSubmit: async ({
form,
cms,
values,
}: {
form: Form
cms: TinaCMS
values: Record<string, any>
}) => {
return {
...values,
lastUpdated: new Date().toISOString(),
}
},
//...
},
//...
},
//...
],
},
//...
})

Adding a created at field

export default defineConfig({
schema: {
collections: [
{
ui: {
beforeSubmit: async ({
form,
cms,
values,
}: {
form: Form
cms: TinaCMS
values: Record<string, any>
}) => {
if (form.crudType === 'create') {
return {
...values,
createdAt: new Date().toISOString(),
}
}
},
//...
},
//...
},
//...
],
},
//...
})

Adding a slug field

export default defineConfig({
schema: {
collections: [
{
ui: {
beforeSubmit: async ({
form,
cms,
values,
}: {
form: Form
cms: TinaCMS
values: Record<string, any>
}) => {
return {
...values,
slug: values.title
.toLowerCase()
.replace(/ /g, '-')
.replace(/[^\w-]+/g, ''),
}
},
//...
},
//...
},
//...
],
},
//...
})
Last Edited: January 1, 1970