ASP.NET Core Blazor | Data Validation

ASP.NET Core Blazor | Data Validation

This is Part 22 of Web development with Blazor video series. In this video we will discuss data validation in ASP.NET Core Blazor.

There are 2 ways to validate data in a Blazor DataGrid.

  1. Using ValidationRules property of <GridColumn> component
  2. By using validation attributes in System.ComponentModel.DataAnnotations

ValidationRules of <GridColumn> component

In the following example, on the FirstName <GridColumn> we have 2 validation rules. FirstName is required and it must contain atleast 2 characters.

<SfGrid DataSource="@Employees">
        <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"></GridColumn>
        <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"
                    ValidationRules="@(new ValidationRules() { Required = true, MinLength = 2 })">
        <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
        <GridColumn Field=@nameof(Employee.DateOfBrith) Format="d" HeaderText="Date of Birth">
        <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>

Validation rules are triggered when an input element loses focus or when the form is submitted. In the example below, you can see required validation in action.

syncfusion blazor datagrid validation

Please note : ValidationRules property enforces validation only on that specific instance of the DataGrid. If you have another DataGrid you need to repeat all the validation rules even on that grid. A better and centralised way to enforce these validation rules is by decorating model class properties with validation attributes in System.ComponentModel.DataAnnotations namespace. This is called model validation.

Model validation in Blazor

  • The DataSource for the DataGrid is List<Employees>. So the model class for the DataGrid is Employee.
  • Decorate the Employee class with validation attributes (Required, MinLength etc).
  • These validation attributes are present in System.ComponentModel.DataAnnotations namespace.
  • In the following example, we have 2 validation attributes on FirstName - Required & MinLength.
public class Employee
    public int EmployeeId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public DateTime DateOfBrith { get; set; }
    public Gender Gender { get; set; }
    public int DepartmentId { get; set; }
    public string PhotoPath { get; set; }
    public Department Department { get; set; }

With these validation attributes in place, when the FirstName field is missing a value, the DataGrid automatically displays required validation error.

Blazor built-in Model Validation Attributes

The following are some of the common built-in validation attributes.

  • Required - Specifies the field is required
  • Range - Specifies the minimum and maximum value allowed
  • MinLength - Specifies the minimum length of a string
  • MaxLength - Specifies the maximum length of a string
  • Compare - Compares 2 properties of a model. For example compare Email and ConfirmEmail properties
  • RegularExpression - Validates if the provided value matches the pattern specified by the regular expression

The following general purpose attributes are also supported by the Blazor DataGrid

  • DisplayFormat - Sets the DisplayFormat for a DataGrid column.
  • Display - Sets the display name for a DataGrid column.
  • Editable - Indicates whether a field is editable.
  • Key - Specifies the PrimaryKey column in DataGrid.

Custom validation error messages

  • By default the following is the default MinLength validation error.
  • The field FirstName must be a string or array type with a minimum length of '2'
  • To change it, use ErrorMessage property of the validation attribute.
public class Employee
    public int EmployeeId { get; set; }
    [MinLength(2, ErrorMessage = "Minimum 2 characters required")]
    public string FirstName { get; set; }

© 2020 Pragimtech. All Rights Reserved.