Form Validation - Overview

The DevExpress UI components support the Blazor's form validation. You can read about the Blazor forms and validation in the official documentation.

In the demo examples we will use the following class type that defines validation logic using data annotations:

The Starship class has been taken from the official documentation with only slight modifications.

Form Validation - Form Layout

Our DxFormLayout component allows you to easily construct responsive and automatically-aligned edit forms. The standard EditForm component enables data validation. This demo shows how you can use the two components together.

Inside the EditForm, the code adds a DxFormLayout component with four DxFormLayoutItem entries. Each layout items contains a DevExpress Data Editor:

  • DxTextBox
  • DxComboBox
  • DxSpinEdit
  • DxDateEdit

As in the previous demo, once you attempt to submit changes, editors become marked with colored outlines. Red indicates invalid values, while green indicates values that were posted successfully.

Below the form the standard Blazor ValidationSummary component displays the validation summary.

Press the "Submit" button to validate the form.

Form Validation - Custom Form

The following example shows a standard EditForm component with a few DevExpress editors in it:

  • DxTextBox
  • DxComboBox
  • DxSpinEdit
  • DxDateEdit

Once you attempt to submit changes, editors become marked with colored outlines. Red indicates invalid values, while green indicates values that were posted successfully.

The code also adds a standard ValidationMessage component for each editor to display error messages.

Press the "Submit" button to validate the form.