Data Input Validation in Blazor Grid
IntegralUI Grid component for Blazor comes with built-in data input validation, which is disabled by default. During data input in Edit Form, if data entered doesn't pass the validation rule settings, a message will popup stating that data is invalid. You can either use built-in validation rules or create your own custom rule based on criteria set in your code.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo present Form Editing with data validation enabled. Depending on the input field, whenever a new data is entered that is not valid, a different message will appear stating that the data for that field is required, a date it's outside the specified range or number is outside allowed limits.
To show the Form and edit the grid data, click on pencil icon shown in first column for each row or double-click a row. A Form will appear on right side within the Grid with input fields for each column that allows editing.
How Data Validation Works in Blazor Grid
At first, make sure the UseValidation property is set to true. This will enable data validation whenever a Form is opened within the Grid to edit data. Next you need to specify the validation rule for grid columns. You can do this within column definitions in HTML or in code by specifying validation for data column objects.
Each column can have its own set of validation rules. In Blazor you can set this within Validation tag, where you can put multiple input validation rules using the IntegralUIGridValidationRule component. Here is an example with the most common rule of Required field:
As code above shows, the Required rule is active for “OrderID” column, where if data entered is null or an empty string, the specified message “OrderID is required” will popup in red above the input field. In addition, the border of the input field will also change to red, stating that either data is invalid.
Within Editing Form if you have input fields with invalid data, when you try to save the data by pressing on Save button the data will not be saved. Instead the DataInvalid event will fire where you can inspect the original and modified data in your code and show a custom message stating the reason why the data is not saved.
Data Input Validation Rules
There are different built-in validation rules that you can use, depending on the data types. You can define the rule with IntegralUIGridValidationRule using the following properties:
- AllowEmpty - determines whether input field accepts empty or null values
- CaseSensitive - determines whether value comparison is case sensitive or not
- ComparisonOperator - specifies the IntegralUIComparisonOperator used to compare the rule value with input value
- Max - the maximum value allowed by the rule
- Message - a one-line text that will appear when data is invalid
- Min - the minimum value allowed by the rule
- Type - specifies the rule type: Compare, Required, Numeric, Range, StringLength or Custom
- Validate - a custom action method set in your code for validation
- Value - the rule value used for comparison
Not all fields are required for each validation rule. Depending on the rule type you can set these properties accordingly. The most used ones are: Type and Message.
Compare
With Compare rule type you need to set the
Numeric
With Numeric rule type you can specify whether null values are allowed in the input field by setting the AllowEmpty to true. This rule checks whether input value is a number or not. If value entered is not a number, the specified Message will popup.
Range
With Range rule type you can specify the range within which input values are valid. You can set Min or Max values or both to define the range. These properties can accept numeric or date values, either set as string, integer or decimal values. If the input value is outside of specified range, the Message will popup.
Required
With Required rule type you can specify whether input value must be entered. If the value is null or an empty string, the validation Message will popup.
StringLength
With StringLength rule type you can specify the range within which the length of a string value is valid. You can set Min or Max values or both to define the range. In this case, these properties can accept numeric values. If the input string value is outside of specified range, a validation Message will appear.
Custom Data Input
With Custom rule type, you can define your own validation rule. By providing an action method using Validate property in your code, you can specify conditions that will determine whether the input value is valid or not. Depending on the result, this method should return true or false. If return value is false, the Message will appear.
The Validate method has the following signature:
bool methodName(object? value)Where value parameter is the input value, based on which you can set condition in your code and return value is of Boolean type.
In this particular example, the column data validation rule states that accepted values must be of type DeliveryOption (custom enumeration), of which the "None" option is not allowed.
The code is excerpt from the Edit Form sample, where DeliverOption is defined to have four values: None, DeliveryTruck, RegularAir and ExpressAir.
Data Invalid Event
In addition to showing the validation message whenever a rule is not passed, during data editing in Blazor Grid, when you try to save an input data that is invalid, the DataInvalid event will fire. This event allows you to inspect the original data (before editing starts) and the modified data when you try to save the data and check the difference. You can set a custom message or notification in your code that will appear based on this event.
Conclusion
IntegralUI Grid component for Blazor have different predefined validation rules that you use to validate data input. Depending on the data type, you can choose a specific rule or set multiple rules that will validate the form data before submitting. For custom scenarios, you can create your own Custom rule, where you can set conditions that will determine whether data is valid or not. In case of invalid data, the DataInvalid event is fired that you can handle in your code.
Grid Component is part of IntegralUI for Blazor, a library of native Blazor components that you can use to develop applications with Blazor .NET framework.