@(Html.DevExtreme().Form()
    .ID("form")
)

<template>
    <div id="app-container">
        <DxForm id="form">
            <!-- Configuration goes here -->
        </DxForm>
    </div>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxForm } from 'devextreme-vue/form';

</script>

import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { Form } from 'devextreme-react/form';

export default function App() {
    return (
        <div className="App">
            <Form id="form">
                {/* Configuration goes here */}
            </Form>
        </div>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            name: "John Heart",
            officeNumber: 901,
            hireDate: new Date(2012, 4, 13)
        }
    });
});

@(Html.DevExtreme().Form()
    .FormData(new {
        Name = "John Heart",
        OfficeNumber = 901,
        HireDate = new DateOnly(2012, 4, 13)
    })
)

<template>
    <DxForm 
        :form-data="employee">
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    officeNumber: 901,
    hireDate: new Date(2012, 4, 13)
};
</script>

import { Form } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    officeNumber: 901,
    hireDate: new Date(2012, 4, 13)
};

export default function App() {
    return (
        <Form
            formData={employee}>
        </Form>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            name: "John Heart",
            officeNumber: 901,
            hireDate: new Date(2012, 4, 13)
        },
        items: ["name", "officeNumber", {
            dataField: "hireDate",
            editorOptions: {
                disabled: true
            }
        }]
    });
});

@(Html.DevExtreme().Form()
    .FormData(new {
        Name = "John Heart",
        OfficeNumber = 901,
        HireDate = new DateOnly(2012, 4, 13)
    })
    .Items(i => {
        i.AddSimple().DataField("Name");
        i.AddSimple().DataField("OfficeNumber");
        i.AddSimple().DataField("HireDate").Editor(e => e
            .DateBox()
            .Disabled(true)
        );
    })
)

<template>
    <DxForm 
        :form-data="employee">
        <DxSimpleItem data-field="name"/>
        <DxSimpleItem data-field="officeNumber"/>
        <DxSimpleItem 
            data-field="hireDate"
            :editor-options="hireDateOptions"
        />
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    officeNumber: 901,
    hireDate: new Date(2012, 4, 13)
};

const hireDateOptions = {
    disabled: true
};
</script>

import { Form, SimpleItem } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    officeNumber: 901,
    hireDate: new Date(2012, 4, 13)
};

const hireDateOptions = {
    disabled: true
};

export default function App() {
    return (
        <Form formData={employee}>
            <SimpleItem dataField="name" />
            <SimpleItem dataField="officeNumber" />
            <SimpleItem 
                dataField="hireDate"
                editorOptions={hireDateOptions}
            />
        </Form>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            name: "John Heart",
            position: "CEO",
            hireDate: new Date(2012, 4, 13),
            officeNumber: 901,
            notes: "John has been in the Audio/Video industry since 1990."
        },
        colCount: 2,
        items: ["name", "position", "hireDate", "officeNumber", {
            dataField: "notes",
            colSpan: 2
        }]
    });
});

@(Html.DevExtreme().Form()
    .FormData(new {
        Name = "John Heart",
        Position = "CEO",
        HireDate = new DateOnly(2012, 4, 13),
        OfficeNumber = 901,
        Notes = "John has been in the Audio/Video industry since 1990."
    })
    .ColCount(2)
    .Items(i => {
        i.AddSimple().DataField("Name");
        i.AddSimple().DataField("Position");
        i.AddSimple().DataField("HireDate");
        i.AddSimple().DataField("OfficeNumber");
        i.AddSimple().DataField("Notes")
            .ColSpan("2")
    })
)

<template>
    <DxForm 
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="name"/>
        <DxSimpleItem data-field="position"/>
        <DxSimpleItem data-field="hireDate"/>
        <DxSimpleItem data-field="officeNumber"/>
        <DxSimpleItem 
            data-field="notes"
            :col-span="2"
        />
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    officeNumber: 901,
    notes: 'John has been in the Audio/Video industry since 1990.'
};
</script>

import { Form, SimpleItem } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    officeNumber: 901,
    notes: 'John has been in the Audio/Video industry since 1990.'
};

export default function App() {
    return (
        <Form
            formData={employee}
            colCount={2}>
            <SimpleItem dataField="name" />
            <SimpleItem dataField="position" />
            <SimpleItem dataField="hireDate" />
            <SimpleItem dataField="officeNumber" />
            <SimpleItem 
                dataField="notes"
                colSpan={2}
            />
        </Form>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            name: "John Heart",
            position: "CEO",
            hireDate: new Date(2012, 4, 13),
            officeNumber: 901,
            phone: "+1(213) 555-9392",
            skype: "jheart_DX_skype",
            email: "jheart@dx-email.com"
        },
        colCount: 2,
        items: [{
            itemType: "group",
            caption: "Personal Information",
            items: ["name", "position", "hireDate", "officeNumber"]
        }, {
            itemType: "group",
            caption: "Contacts",
            items: ["phone", "skype", "email"]
        }]
    });
});

@(Html.DevExtreme().Form()
    .FormData(new {
        Name = "John Heart",
        Position = "CEO",
        HireDate = new DateOnly(2012, 4, 13),
        OfficeNumber = 901,
        Phone = "+1(213) 555-9392",
        Skype = "jheart_DX_skype",
        Email = "jheart@dx-email.com"
    })
    .ColCount(2)
    .Items(FormItems => {
        FormItems.AddGroup().Caption("Personal Information").Items(PersonalInfoItems => {
            PersonalInfoItems.AddSimple().DataField("Name");
            PersonalInfoItems.AddSimple().DataField("Position");
            PersonalInfoItems.AddSimple().DataField("HireDate");
            PersonalInfoItems.AddSimple().DataField("OfficeNumber");
        });
        FormItems.AddGroup().Caption("Contacts").Items(ContactsItems => {
            ContactsItems.AddSimple().DataField("Phone");
            ContactsItems.AddSimple().DataField("Skype");
            ContactsItems.AddSimple().DataField("Email");
        });
    })
)

<template>
    <DxForm 
        :form-data="employee"
        :col-count="2">
        <DxGroupItem
            caption="Personal Information">
            <DxSimpleItem data-field="name"/>
            <DxSimpleItem data-field="position"/>
            <DxSimpleItem data-field="hireDate"/>
            <DxSimpleItem data-field="officeNumber"/>
        </DxGroupItem>
        <DxGroupItem caption="Contacts">
            <DxSimpleItem data-field="phone"/>
            <DxSimpleItem data-field="skype"/>
            <DxSimpleItem data-field="email"/>
        </DxGroupItem>
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem, DxGroupItem } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    officeNumber: 901,
    phone: '+1(213) 555-9392',
    skype: 'jheart_DX_skype',
    email: 'jheart@dx-email.com'
};
</script>

import { Form, SimpleItem, GroupItem } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    officeNumber: 901,
    phone: '+1(213) 555-9392',
    skype: 'jheart_DX_skype',
    email: 'jheart@dx-email.com'
};

export default function App() {
    return (
        <Form
            formData={employee}
            colCount={2}>
            <GroupItem 
                caption="Personal Information">
                <SimpleItem dataField="name" />
                <SimpleItem dataField="position" />
                <SimpleItem dataField="hireDate" />
                <SimpleItem dataField="officeNumber" />
            </GroupItem>
            <GroupItem caption="Contacts">
                <SimpleItem dataField="phone" />
                <SimpleItem dataField="skype" />
                <SimpleItem dataField="email" />
            </GroupItem>
        </Form>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            name: 'John Heart',
            position: 'CEO',
            hireDate: new Date(2012, 4, 13),
            officeNumber: 901,
            phone: '+1(213) 555-9392',
            skype: 'jheart_DX_skype',
            email: 'jheart@dx-email.com',
            notes: 'John has been in the Audio/Video industry since 1990.'
        },
        items: [{
            itemType: "group",
            colCount: 2,
            items: [{
                itemType: "group",
                caption: "Employee",
                items: ["name", "position", "hireDate", "officeNumber"]
            }, {
                itemType: "group",
                caption: "Personal Information",
                items: [{
                    itemType: "tabbed",
                    tabPanelOptions: {
                        height: 280
                    },
                    tabs: [{
                        title: "Contacts",
                        items: ["skype", "phone",  "email"]
                    }, {
                        title: "Note",
                        items: ["notes"]
                    }]
                }]
            }]
        }]
    });
});

@(Html.DevExtreme().Form()
    .FormData(new {
        Name = "John Heart",
        Position = "CEO",
        HireDate = new DateOnly(2012, 4, 13),
        OfficeNumber = 901,
        Phone = "+1(213) 555-9392",
        Skype = "jheart_DX_skype",
        Email = "jheart@dx-email.com",
        Notes = "John has been in the Audio/Video industry since 1990."
    })
    .ColCount(2)
    .Items(FormItems => {
        FormItems.AddGroup().ColCount(2).Items(MainGroupItems => {
            MainGroupItems.AddGroup().Caption("Employee").Items(EmployeeItems);
            MainGroupItems.AddGroup().Caption("Personal Information").Items(PersonalInfoItems);
        });
    })
)

@functions {
    void EmployeeItems(FormItemsFactory<object> Items) {
        Items.AddSimple().DataField("Name").IsRequired(true);
        Items.AddSimple().DataField("Position");
        Items.AddSimple().DataField("HireDate");
        Items.AddSimple().DataField("OfficeNumber");
    }

    void PersonalInfoItems(FormItemsFactory<object> Items) {
        Items.AddTabbed().TabPanelOptions(Options => 
            Options.Height(280)
        ).Tabs(Tabs => {
            Tabs.Add().Title("Contacts").Items(ContactsItems => {
                ContactsItems.AddSimple().DataField("Skype");
                ContactsItems.AddSimple().DataField("Phone");
                ContactsItems.AddSimple().DataField("Email");
            });
            Tabs.Add().Title("Note").Items(NoteItems => 
                NoteItems.AddSimple().DataField("Notes")
            );
        });
    }
}

<template>
    <DxForm 
        :form-data="employee"
        :col-count="2">
        <DxGroupItem caption="Employee">
            <DxSimpleItem data-field="name"/>
            <DxSimpleItem data-field="position"/>
            <DxSimpleItem data-field="hireDate"/>
            <DxSimpleItem data-field="officeNumber"/>
        </DxGroupItem>
        <DxGroupItem caption="Personal Information">
            <DxTabbedItem>
                <DxTabPanelOptions :height="280"/>
                <DxTab title="Contacts">
                    <DxSimpleItem data-field="skype"/>
                    <DxSimpleItem data-field="phone"/>
                    <DxSimpleItem data-field="email"/>
                </DxTab>
                <DxTab title="Note">
                    <DxSimpleItem data-field="notes"/>
                </DxTab>
            </DxTabbedItem>
        </DxGroupItem>
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem, DxGroupItem, DxTabbedItem, DxTab, DxTabPanelOptions } from 'devextreme-vue/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    officeNumber: 901,
    phone: '+1(213) 555-9392',
    skype: 'jheart_DX_skype',
    email: 'jheart@dx-email.com',
    notes: 'John has been in the Audio/Video industry since 1990.'
};
</script>

import { Form, SimpleItem, GroupItem, TabbedItem, Tab, TabPanelOptions } from 'devextreme-react/form';

const employee = {
    name: 'John Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    officeNumber: 901,
    phone: '+1(213) 555-9392',
    skype: 'jheart_DX_skype',
    email: 'jheart@dx-email.com',
    notes: 'John has been in the Audio/Video industry since 1990.'
};

export default function App() {
    return (
        <Form
            formData={employee}
            colCount={2}>
            <GroupItem caption="Employee">
                <SimpleItem dataField="name" />
                <SimpleItem dataField="position" />
                <SimpleItem dataField="hireDate" />
                <SimpleItem dataField="officeNumber" />
            </GroupItem>
            <GroupItem caption="Personal Information">
                <TabbedItem>
                    <TabPanelOptions height={280} />
                    <Tab title="Contacts">
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="skype" />
                        <SimpleItem dataField="email" />
                    </Tab>
                    <Tab title="Note">
                        <SimpleItem dataField="notes" />
                    </Tab>
                </TabbedItem>
            </GroupItem>
        </Form>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            // ...
        },
        colCount: 2,
        items: ["name", "position", "hireDate", "officeNumber", {
            itemType: "empty",
            colSpan: 2
        }, "phone", "skype", "email"]
    });
});

@(Html.DevExtreme().Form()
    .ColCount(2)
    .Items(FormItems => {
        FormItems.AddSimple().DataField("Name");
        FormItems.AddSimple().DataField("Position");
        FormItems.AddSimple().DataField("HireDate");
        FormItems.AddSimple().DataField("OfficeNumber");
        FormItems.AddEmpty().ColSpan(2);
        FormItems.AddSimple().DataField("Skype");
        FormItems.AddSimple().DataField("Phone");
        FormItems.AddSimple().DataField("Email");
    })
)

<template>
    <DxForm 
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="name"/>
        <DxSimpleItem data-field="position"/>
        <DxSimpleItem data-field="hireDate"/>
        <DxSimpleItem data-field="officeNumber"/>
        <DxEmptyItem 
            :col-span="2"
        />
        <DxSimpleItem dataField="skype"/>
        <DxSimpleItem dataField="phone"/>
        <DxSimpleItem dataField="email"/>
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem, DxEmptyItem } from 'devextreme-vue/form';

const employee = {
    // ...
};
</script>

import { Form, SimpleItem, EmptyItem } from 'devextreme-react/form';

const employee = {
    // ...
};

export default function App() {
    return (
        <Form
            formData={employee}
            colCount={2}>
            <SimpleItem dataField="name" />
            <SimpleItem dataField="position" />
            <SimpleItem dataField="hireDate" />
            <SimpleItem dataField="officeNumber" />
            <EmptyItem 
                colSpan={2}
            />
            <SimpleItem dataField="phone" />
            <SimpleItem dataField="skype" />
            <SimpleItem dataField="email" />
        </Form>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            // ...
        },
        labelLocation: "top",
        colCount: 2,
        items: ["name", "position", "hireDate", "officeNumber", {
            dataField: "notes",
            colSpan: 2,
            label: {
                alignment: "center"
            }
        }]
    });
});

@(Html.DevExtreme().Form()
    .LabelLocation(FormLabelLocation.Top)
    .ColCount(2)
    .Items(i => {
        i.AddSimple().DataField("Name");
        i.AddSimple().DataField("Position");
        i.AddSimple().DataField("HireDate");
        i.AddSimple().DataField("OfficeNumber");
        i.AddSimple().DataField("Notes")
            .ColSpan(2)
            .Label(l => l
                .Alignment(HorizontalAlignment.Center)
            );
    })
)

<dx-form
    [formData]="employee"
    [colCount]="2"
    labelLocation="top">
    <dxi-form-item dataField="name"></dxi-form-item>
    <dxi-form-item dataField="position"></dxi-form-item>
    <dxi-form-item dataField="hireDate"></dxi-form-item>
    <dxi-form-item dataField="officeNumber"></dxi-form-item>
    <dxi-form-item 
        dataField="notes" 
        [colSpan]="2">
        <dxo-form-label alignment="center">
        </dxo-form-label>
    </dxi-form-item>
</dx-form>

<template>
    <DxForm 
        :form-data="employee"
        :col-count="2"
        label-location="top">
        <DxSimpleItem data-field="name"/>
        <DxSimpleItem data-field="position"/>
        <DxSimpleItem data-field="hireDate"/>
        <DxSimpleItem data-field="officeNumber"/>
        <DxSimpleItem 
            data-field="notes"
            :col-span="2">
            <DxLabel alignment="center"/>
        </DxSimpleItem>
    </DxForm>
</template>

<script>
import { DxForm, DxSimpleItem, DxLabel } from 'devextreme-vue/form';

const employee = {
    // ...
};
</script>

import { Form, SimpleItem, Label } from 'devextreme-react/form';

const employee = {
    // ...
};

export default function App() {
    return (
        <Form
            formData={employee}
            colCount={2}
            labelLocation="top">
            <SimpleItem dataField="name" />
            <SimpleItem dataField="position" />
            <SimpleItem dataField="hireDate" />
            <SimpleItem dataField="officeNumber" />
            <SimpleItem 
                dataField="notes"
                colSpan={2}>
                <Label alignment="center" />
            </SimpleItem>
        </Form>
    );
}

$(function() {
    const form = $("#form").dxForm({
        formData: {
            // ...
        },
        items: [
            // ...
        ]
    }).dxForm("instance");

    $("#checkBox").dxCheckBox({
        text: "Enable read-only mode",
        value: false,
        onValueChanged: function (e) {
            form.option("readOnly", e.value);
        }
    });
});

@(Html.DevExtreme().Form()
    .ID("form")
)

@(Html.DevExtreme().CheckBox()
    .Text("Enable read-only mode")
    .OnValueChanged("handleCheckBoxValueChanged")
)

<script>
    function handleCheckBoxValueChanged(e) {
        $('#form').dxForm('instance').option('readOnly', e.value);
    }
</script>

<template>
    <div>
        <DxForm 
            :form-data="employee"
            :read-only="isFormReadOnly"
        >
            <!-- ... -->
        </DxForm>
        <DxCheckBox
            text="Enable read-only mode"
            v-model:value="isFormReadOnly"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DxForm } from 'devextreme-vue/form';
import { DxCheckBox } from 'devextreme-vue/check-box';

const employee = {
    // ...
};

const isFormReadOnly = ref<boolean>(false);
</script>

import React, {useState, useCallback } from 'react';
import { Form } from 'devextreme-react/form';
import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box';

const employee = {
    // ...
};

export default function App() {
    const [isFormReadOnly, setIsFormReadOnly] = useState<boolean>(false);

    const onCheckBoxValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
        setIsFormReadOnly(e.value);
    }, []);

    return (
        <div>
            <Form
                formData={employee}
                readOnly={isFormReadOnly}>
                {/* ... */}
            </Form>
            <CheckBox
                text="Enable read-only mode"
                value={isFormReadOnly}
                onValueChanged={onCheckBoxValueChanged} 
            />
        </div>
    );
}

$(function() {
    $("#form").dxForm({
        formData: {
            // ...
        },
        colCount: 2,
        items: [{
            dataField: "name",
            isRequired: true
        }, {
            dataField: "officeNumber",
            validationRules: [{
                type: "numeric"
            }] 
        }, {
            dataField: "email",
            validationRules: [{
                type: "email"
            }] 
        }]
    });
});

@(Html.DevExtreme().Form()
    .ColCount(2)
    .Items(i => {
        i.AddSimple().DataField("Name")
            .IsRequired(true);
        i.AddSimple().DataField("OfficeNumber").ValidationRules(r => 
            r.AddNumeric()
        );
        i.AddSimple().DataField("Email").ValidationRules(r => 
            r.AddEmail()
        );
    })
)

<dx-form
    [formData]="employee"
    [colCount]="2">
    <dxi-form-item dataField="name" [isRequired]="true">
    </dxi-form-item>
    <dxi-form-item dataField="officeNumber">
        <dxi-form-validation-rule type="numeric">
        </dxi-form-validation-rule>
    </dxi-form-item>
    <dxi-form-item dataField="email">
        <dxi-form-validation-rule type="email">
        </dxi-form-validation-rule>
    </dxi-form-item>
</dx-form>

<template>
    <DxForm 
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="name :is-required="true"/>
        <DxSimpleItem data-field="officeNumber">
            <DxNumericRule/>
        </DxSimpleItem>
        <DxSimpleItem data-field="email">
            <DxEmailRule/>
        </DxSimpleItem>
    </DxForm>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem, DxNumericRule, DxEmailRule } from 'devextreme-vue/form';

</script>

import { Form, SimpleItem, NumericRule, EmailRule } from 'devextreme-react/form';

// ...
export default function App() {
    return (
        <Form
            formData={employee}
            colCount={2}>
            <SimpleItem dataField="name" isRequired={true} />
            <SimpleItem dataField="officeNumber">
                <NumericRule />
            </SimpleItem>
            <SimpleItem dataField="email">
                <EmailRule />
            </SimpleItem>
        </Form>
    );
}

<form action="/employee-page" id="form-container">
    @(Html.DevExtreme().Form()
        .ColCount(2)
        .Items(FormItems => {
            FormItems.AddGroup().ColCount(2).Caption("Personal Information").Items(MainGroupItems => {
                MainGroupItems.AddSimple().DataField("Name")
                    .IsRequired(true);
                MainGroupItems.AddSimple().DataField("OfficeNumber").ValidationRules(r => 
                    Rules.AddNumeric()
                );
                MainGroupItems.AddSimple().DataField("Email").ValidationRules(r => 
                    Rules.AddEmail()
                );
            });
            FormItems.AddButton().ButtonOptions(Button => 
                Button.Text("Submit the Form").UseSubmitBehavior(true)
            );
        })
    )
</form>

<script>
    $('#form-container').on('submit', (e) => {
        setTimeout(() => {
            DevExpress.ui.notify('Submitted', 'success', 2000);
        }, 1000);

        e.preventDefault();
    });
</script>

<template>
    <form action="/employee-page" @submit="handleSubmit">
        <DxForm 
            :form-data="employee"
            :col-count="2">
            <DxGroupItem
                caption="Personal Information"
                :col-count="2">
                <DxSimpleItem data-field="name" :is-required="true"/>
                <DxSimpleItem data-field="officeNumber">
                    <DxNumericRule/>
                </DxSimpleItem>
                <DxSimpleItem data-field="email">
                    <DxEmailRule/>
                </DxSimpleItem>
            </DxGroupItem>
            <DxButtonItem :button-options="submitButtonOptions"/>
        </DxForm>
    </form>
</template>

<script setup lang="ts">
import { DxForm, DxSimpleItem, DxGroupItem, DxButtonItem, DxNumericRule, DxEmailRule } from 'devextreme-vue/form';
import notify from 'devextreme/ui/notify';

const employee = {
    // ...
};

const submitButtonOptions = {
    text: "Submit the Form",
    useSubmitBehavior: true
};

const handleSubmit = (e: Event): void => {
    setTimeout(() => {
        notify('Submitted', 'success', 2000);
    }, 1000);

    e.preventDefault();
};
</script>

import React, { useCallback } from 'react';
import { Form, SimpleItem, GroupItem, ButtonItem, NumericRule, EmailRule } from 'devextreme-react/form';
import notify from 'devextreme/ui/notify';

const employee = {
    // ...
};

const submitButtonOptions = {
    text: "Submit the Form",
    useSubmitBehavior: true
};

export default function App() {
    const handleSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
        setTimeout(() => {
            notify('Submitted', 'success', 2000);
        }, 1000);

        e.preventDefault();
    }, []);

    return (
        <form action="/employee-page" onSubmit={handleSubmit}>
            <Form
                formData={employee}
                colCount={2}>
                <GroupItem 
                    caption="Personal Information"
                    colCount={2}>
                    <SimpleItem dataField="name" isRequired={true} />
                    <SimpleItem dataField="officeNumber">
                        <NumericRule />
                    </SimpleItem>
                    <SimpleItem dataField="email">
                        <EmailRule />
                    </SimpleItem>
                </GroupItem>
                <ButtonItem buttonOptions={submitButtonOptions} />
            </Form>
        </form>
    );
}

<form action="/employee-page" id="form-container">
    @(Html.DevExtreme().Form()
        .ColCount(2)
        .Items(FormItems => {
            @* ... *@
            FormItems.AddButton().ButtonOptions(Button => 
                Button
                    .Text("Submit the Form")
                    .UseSubmitBehavior(true)
                    .OnClick("handleSubmitButtonClick")
            );
        })
    )
</form>

<script>
    function handleSubmitButtonClick() {
        const validationResult = formInstance.validate(); // get Form instance beforehand
        if (validationResult.isValid)
            document.getElementById("form-container").submit();
        else
            DevExpress.ui.notify('Form is Invalid', 'error', 2000);
    }
</script>

<template>
    <form action="/employee-page" id="form-container">
        <DxForm>
            <DxButtonItem :button-options="submitButtonOptions"/>
        </DxForm>
    </form>
</template>

<script setup lang="ts">
import { DxForm, DxButtonItem } from 'devextreme-vue/form';
import notify from 'devextreme/ui/notify';

const submitButtonOptions = {
    text: "Submit the Form",
    onClick: function() {
        const validationResult = formInstance.validate(); // get Form instance beforehand
        if (validationResult.isValid)
            document.getElementById("form-container").submit();
        else
            notify('Form is Invalid', 'error', 2000);
    }
};
</script>

import { Form, ButtonItem } from 'devextreme-react/form';
import notify from 'devextreme/ui/notify';

const submitButtonOptions = {
    text: "Submit the Form",
    onClick: function() {
        const validationResult = formInstance.validate(); // get Form instance beforehand
        if (validationResult.isValid)
            document.getElementById("form-container").submit();
        else
            notify('Form is Invalid', 'error', 2000);
    }
};

export default function App() {
    return (
        <form action="/employee-page" id="form-container">
            <Form ... >
                <ButtonItem buttonOptions={submitButtonOptions} />
            </Form>
        </form>
    );
}