Edit Form Validation (Templates)

• Aug 01, 2019
• 2 minutes to read

Data entered by an end-user within the Edit Form‘s editors can be validated on the client or server side before posting it to a data source. Client-side validation helps you improve performance, because it avoids sending a callback to a server.

Regular Edit Form

A click on the Update button within the regular Edit Form automatically invokes client validation for form editors whose validation settings are defined using the corresponding columns’ EditProperties.ValidationSettings property (it can be accessed by a column’s property providing access to editor settings, e.g., PropertiesTextEdit). In this instance, if the validation fails, error icons are displayed next to editors with invalid values.

Templated Edit Form

If you design the Edit Form yourself, you use either the CardViewTemplates.EditForm or CardViewColumn.EditItemTemplate template and add custom editors to the Edit Form’s template container. In this instance, when pressing the standard Update button, client-side validation will not be automatically invoked for the custom editors and the ‘UPDATEEDIT’ callback will be sent to the server. In this situation, you should implement server-side validation by handling the ASPxCardView.CardValidating event. Otherwise, invalid data will be posted to a database.

To invoke client-side validation for custom editors placed within the Edit Form’s template, make use of a template container’s ValidationGroup property. You can assign this property value to the ValidationSettings.ValidationGroup property of custom editors to be validated. The code below demonstrates how this can be done when defining an Edit Form’s template.

ASPX

   <dx:ASPxCardView ... >
       ...
       <Templates>
            <EditForm>
                ...
                <dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px" ValidationSettings-ValidationGroup="<%# Container.ValidationGroup %>">
                    <ValidationSettings>
                        <RequiredField IsRequired="true" />
                    </ValidationSettings>
                </dx:ASPxTextBox>
                ...
            </EditForm>
        </Templates>
        ...
   </dx:ASPxCardView>

As a result, client validation will be performed after clicking the Update button, and the ‘UPDATEEDIT’ callback will not be sent to the server while the Edit Form contains invalid values.