The DevExpress UI components support 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 Starship class that defines validation logic based on data annotations. This class has been taken from the official documentation with only slight modifications.
Note: You should not rely on form validation alone to secure your Blazor-powered app. Form validation is designed to improve usability. A threat actor can bypass validation and send malicious data to the server. To minimize security related threats/risks, you must validate user input using multiple strategies. Refer to the following topic for more information: Validate User Input.
Our Blazor Form Layout component allows you to construct responsive and auto-aligned edit forms with ease.
As you know the standard Blazor EditForm component offers data validation support. This demo illustrates how to use these two components together.
Inside the EditForm, sample code adds a Form Layout component with five layout items. Each item contains a DevExpress data editor:
The EditForm also contains a DevExpress Button component with its SubmitFormOnClick option set to true.
Below the form, the standard Blazor ValidationSummary component displays the validation summary.
Blazor data editors can display validation icons and colored outlines based on validation results. By default, the editors display red outlines and error icons for invalid inputs. To indicate valid inputs, you can activate the Show Validation Success State option in this demo, or set the ShowValidationSuccessState global option or an individual editor's ShowValidationSuccessState property to true in your project.
You can also disable validation icon display. Use the Show Validation Icons option in this demo, or use the ShowValidationIcon global option or an individual editor's ShowValidationIcon property in your project.
You can also disable validation for editors. Simply set an editor's ValidationEnabled property to false.
The following example shows a standard EditForm component with a few DevExpress editors in it:
Once you attempt to submit changes, editors are marked with colored outlines. Red indicates invalid values, while green indicates values that were posted successfully. You can also use the ShowValidationIcon global option or an editor's ShowValidationIcon property to specify whether editors should display validation icons.
The code also adds a standard ValidationMessage component for each editor to display error messages.