# Validation

DataGrid Validation is based on validation rules in all edit modes. Please see the following topic for more details about DataGrid validation: [Validation](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Editing/#Data_Validation). Note that DataGrid validates only modified values.

Define rules for columns and DataGrid will automatically apply them to editors.

// jQuery
$("#dataGridContainer").dxDataGrid({
    columns: [{
        dataField: "Full_Name",
        validationRules: [{ type: "required" }]
    }
    // ...
    ]
});

// Angular
<dx-data-grid ... >
    <dxi-column dataField="Full_Name">
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
</dx-data-grid>

// Vue
<DxDataGrid ... >
    <DxColumn data-field="Full_Name">
        <DxRequiredRule />
    </DxColumn>
</DxDataGrid>

// React
<DataGrid ... >
    <Column dataField="Full_Name">
        <RequiredRule />
    </Column>
</DataGrid>

If you define form items in the [edit Form](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#form), don't assign validation rules directly to form items since they may work incorrectly.

// jQuery
$("#dataGridContainer").dxDataGrid({
    columns: [{
        dataField: "Full_Name",
        validationRules: [{ type: "required" }] // correct
    }
    // ...
    ],
    editing: {
        form: {
            items: [{
                dataField: "Full_Name",
                validationRules: [{type: 'required'}] // incorrect
            }]
        }
    }
});

// Angular
<dx-data-grid ... >
    <dxi-column dataField="Full_Name">
        <!-- correct -->
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxo-editing>
        <dxo-form>
            <dxi-item dataField="Full_Name">
                <!-- incorrect -->
                <dxi-validation-rule type="required">    
            </dxi-item>
        </dxo-form>
    </dxo-editing>
</dx-data-grid>

// Vue
<DxDataGrid ... >
    <DxColumn data-field="Full_Name">
        <!-- correct -->
        <DxRequiredRule />
    </DxColumn>
    <DxEditing>
    	<DxForm>
    	    <DxItem dataField="Full_Name">
                <!-- incorrect -->
                <DxRequiredRule />
            </DxItem>
    	</DxForm>
    </DxEditing>
</DxDataGrid>

// React
<DataGrid ... >
    <Column dataField="Full_Name">
        <!-- correct -->
        <RequiredRule />
    </Column>
    <Editing>
        <Form>
            <Item dataField="Full_Name" >
                <!-- incorrect -->
                <RequiredRule />
            </Item>
        </Form>
    </Editing>
</DataGrid>

You also don't need to set [FormItem.isRequired](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#isRequired) as DataGrid automatically sets this option for all form items whose corresponding columns have [RequiredRule](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/RequiredRule/).

You can display the validation summary just like for the regular Form: [form.showValidationSummary](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Configuration/#showValidationSummary).

If you customized the Form layout and it has tabs, disable TabbedItem.tabPanelOptions.[deferRendering](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#deferRendering) so that the DataGrid can validate all editors in all tabs. Otherwise, validation rules won't be executed for items under non-initialized tabs.

// jQuery
$("#dataGridContainer").dxDataGrid({
    editing: {
        form: {
            items: [{
                itemType: "tabbed",
                tabPanelOptions: {
                    deferRendering: false,
                },
                tabs: [...]
            }]
        }
    }
});

// Angular
<dx-data-grid ... >
    <dxo-editing>
        <dxo-form>
            <dxi-itemitemType="tabbed">
                <dxo-tab-panel-options [deferRendering]="false">
                </dxo-tab-panel-options>
                <dxi-tab></dxi-tab>
            </dxi-item>
        </dxo-form>
    </dxo-editing>
</dx-data-grid>

// Vue
<DxDataGrid ... >
    <DxEditing>
    	<DxForm>
    	    <DxTabbedItem>
                <DxTabPanelOptions
                    :defer-rendering="false"
                />
                 <DxTab></DxTab>
            </DxTabbedItem>
    	</DxForm>
    </DxEditing>
</DxDataGrid>

// React
<DataGrid ... >
    <Editing>
        <Form>
            <TabbedItem>
                <TabPanelOptions deferRendering={false} />
                <Tab></Tab>
            </Item>
        </Form>
    </Editing>
</DataGrid>