Validate User Input in Blazor Grid

• Oct 30, 2024
• 7 minutes to read

The Grid allows you to validate user input and display validation results.

Run Demo: Input Validation

Important

You should not rely on grid input validation alone to secure your Blazor-powered app. Grid 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.

Built-In Validation

The Grid component uses the DataAnnotationsValidator to validate user input based on data annotation attributes defined in an edit model and display error messages. The Grid validates editor values in the following cases:

• A user modifies a data editor’s value and removes focus from this editor.
• A user attempts to save changes.
• The SaveChangesAsync() method is called.

In EditCell mode, the Grid component also validates cell values when focus leaves the edited row. The component prevents users from editing another row until they address all validation errors.

Based on the edit mode, the Grid component displays validation results in one of the following ways.

Validation in Cell Editors

In EditRow and EditCell edit modes, the Grid component displays error validation icons in cell editors. Users can hover the mouse pointer over an icon to display the corresponding error message in the tooltip.

Enable an editor’s ShowValidationSuccessState property to display a success icon when validation passes. The GlobalOptions.ShowValidationSuccessState setting allows you to enable success validation icons for all editors inside and outside the Grid component.

The GlobalOptions.ShowValidationIcon property does not affect editors displayed in Grid cells. To hide validation icons in a cell editor, set its ShowValidationIcon property to false.

Validation in Edit Forms

In EditForm and PopupEditForm edit modes, the Grid component uses the standard form validation technique. If validation fails, the Grid component marks editors with red outlines and displays error validation icons. Users can hover the mouse pointer over an icon to display the corresponding error message in the tooltip.

Enable the editor’s ShowValidationSuccessState property to display green outline and validation icon after successful validation:

Razor

<DxGrid Data="DataSource"
        KeyFieldName="EmployeeId"
        EditModelSaving="Grid_EditModelSaving"
        DataItemDeleting="Grid_DataItemDeleting"
        CustomizeDataRowEditor="Grid_CustomizeDataRowEditor">
    <Columns>
        <DxGridCommandColumn Width="160px" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        @{
            var employee = (EditableEmployee)EditFormContext.EditModel;
        }
        <DxFormLayout CssClass="w-100">
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:" ColSpanMd="6">
                @EditFormContext.GetEditor("Title")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<EditableEmployee> DataSource { get; set; }

    void Grid_CustomizeDataRowEditor(GridCustomizeDataRowEditorEventArgs e) {
        var settings = (IEditSettings)e.EditSettings;
        settings.ShowValidationSuccessState = true;
    }
    // ...
}

Employee.cs

public partial class EditableEmployee {
    public int EmployeeId { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string Title { get; set; }
    [Required]
    [Range(typeof(DateTime), "1/1/1970", "1/1/2000", ErrorMessage = "BirthDate must be between {1:d} and {2:d}")]
    public Nullable<System.DateTime> BirthDate { get; set; }
    [Required]
    [Range(typeof(DateTime), "1/1/2000", "1/1/2022", ErrorMessage = "HireDate must be between {1:d} and {2:d}")]
    public Nullable<System.DateTime> HireDate { get; set; }
}

Disable an editor’s ShowValidationIcon property to hide validation icons in this editor. Specify GlobalOptions.ShowValidationIcon and GlobalOptions.ShowValidationSuccessState properties to customize validation results for editors in the Grid edit form and standard EditForm.

Display Validation Message

When you define EditFormTemplate or CellEditTemplate, you can use any of the following techniques to display validation messages:

• Use Blazor’s standard ValidationMessage component to display messages for individual data editors.
• Use the template context’s EditContext property to access validation messages and display them manually.

• Use the ValidationSummary component to summarize validation messages.

  <DxGrid ...>
      <Columns>
          @* ... *@
      </Columns>
      <EditFormTemplate Context="editFormContext">
          <DxFormLayout>
              <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                  @EditFormContext.GetEditor("FirstName")
              </DxFormLayoutItem>
              <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                  @EditFormContext.GetEditor("LastName")
              </DxFormLayoutItem>
              <DxFormLayoutItem Caption="Title:" ColSpanMd="6">
                  @EditFormContext.GetEditor("Title")
              </DxFormLayoutItem>
              <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                  @EditFormContext.GetEditor("HireDate")
              </DxFormLayoutItem>
              <DxFormLayoutItem ColSpanMd="12">
                  <ValidationSummary />
              </DxFormLayoutItem>
          </DxFormLayout>
      </EditFormTemplate>
  </DxGrid>
  

Custom Validation

You can create custom validator components as described in the following Microsoft topic: Validator components.

To enable custom validation in the Grid, declare validator components in one of the following templates:

CustomValidators

Declared validators override the standard DataAnnotationsValidator. If you need to use DataAnnotationsValidator in addition to custom validators, declare it in the CustomValidators template explicitly.

EditFormTemplate or CellEditTemplate

The Grid uses the standard DataAnnotationsValidator and declared custom validators. Do not place the DataAnnotationsValidator in the edit form template to avoid validation message duplicates.

The following example uses a custom validator to evaluate the Title field value.

View Example: Custom Validation View Example: Display an error message from the Web API Service

Index.razor

@page "/"

@using CustomValidation.Models
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        CustomizeDataRowEditor="OnCustomizeDataRowEditor"
        CustomizeEditModel="OnCustomizeEditModel"
        KeyFieldName="EmployeeId">
    <Columns>
        <DxGridCommandColumn DeleteButtonVisible="false" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                @editFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                @editFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                @editFormContext.GetEditor("Title")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                @editFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
    <CustomValidators>
        <MyCustomValidator DataItemValidating="ValidateGridData" />
    </CustomValidators>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    void ValidateGridData(ValidationMessageStoreEventArgs e) {
        var employee = (Employee)e.EditModel;
        if (employee.Title == null || !employee.Title.Contains("Sales")) {
            e.AddError(nameof(employee.Title), "The Title field value should contain 'Sales'.");
        }
    }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    void OnCustomizeEditModel(GridCustomizeEditModelEventArgs e) {
        if(e.IsNew) {
            var editModel = (Employee)e.EditModel;
            editModel.EmployeeId = GridDataSource.Count() + 1;
        }
    }

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        if (e.IsNew)
            await Northwind.AddAsync(editModel);
        else
            e.CopyChangesToDataItem();
        await Northwind.SaveChangesAsync();
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    void OnCustomizeDataRowEditor(GridCustomizeDataRowEditorEventArgs e) {
        if(e.EditSettings is ITextEditSettings settings)
            settings.ShowValidationIcon = true;
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

CustomValidator.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace CustomValidation.Pages {
    public class ValidationMessageStoreEventArgs : EventArgs {
        public ValidationMessageStoreEventArgs(object model, Dictionary<string, List<string>> errors) {
            EditModel = model;
            Errors = errors;
        }
        public object EditModel { get; }
        private Dictionary<string, List<string>> Errors { get; }
        public void AddError(string fieldName, string errorText) {
            if (string.IsNullOrEmpty(fieldName) || string.IsNullOrEmpty(errorText))
                return;
            if (!Errors.ContainsKey(fieldName))
                Errors[fieldName] = new List<string>();
            Errors[fieldName].Add(errorText);
        }
    }
    public class MyCustomValidator : ComponentBase {
        private ValidationMessageStore MessageStore;
        [CascadingParameter]
        private EditContext CurrentEditContext { get; set; }
        [Parameter]
        public Action<ValidationMessageStoreEventArgs> DataItemValidating { get; set; }
        protected override void OnInitialized() {
            if (CurrentEditContext == null) {
                throw new InvalidOperationException(
                    $"{nameof(MyCustomValidator)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(MyCustomValidator)} " +
                    $"inside an {nameof(EditForm)}.");
            }
            MessageStore = new(CurrentEditContext);
            CurrentEditContext.OnValidationRequested += (s, e) => ValidateData();
            CurrentEditContext.OnFieldChanged += (s, e) => ValidateData();
        }
        void ValidateData() {
            if (DataItemValidating == null)
                return;
            var errors = new Dictionary<string, List<string>>();
            var args = new ValidationMessageStoreEventArgs(CurrentEditContext.Model, errors);
            DataItemValidating.Invoke(args);

            MessageStore.Clear();
            foreach (var error in errors)
                MessageStore.Add(CurrentEditContext.Field(error.Key), error.Value);
            CurrentEditContext.NotifyValidationStateChanged();
        }
    }
}

Employee.cs

using System;
using System.Collections.Generic;

namespace CustomValidation.Models;

public partial class Employee {
    public int EmployeeId { get; set; }
    public string LastName { get; set; } = null!;
    public string FirstName { get; set; } = null!;
    public string? Title { get; set; }
    public DateTime? HireDate { get; set; }

}

NorthwindContext.cs

using System;
using System.Collections.Generic;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Options;

namespace CustomValidation.Models;

public partial class NorthwindContext : DbContext {
    public NorthwindContext() {}

    public NorthwindContext(DbContextOptions<NorthwindContext> options) : base(options) {}

    public virtual DbSet<Employee> Employees { get; set; }
    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
    }
    protected override void OnModelCreating(ModelBuilder modelBuilder) {
        modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
        modelBuilder.Entity<Employee>(entity => {
            entity.HasIndex(e => e.EmployeeId, "EmployeeId");
            entity.HasIndex(e => e.LastName, "LastName");
            entity.HasIndex(e => e.FirstName, "FirstName");
            entity.HasIndex(e => e.Title, "Title");
            entity.HasIndex(e => e.HireDate, "HireDate");
        });
        OnModelCreatingPartial(modelBuilder);
    }
    partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind.db");
    options.UseSqlite("Data Source=" + dbPath);
});

Disable Validation

Set the ValidationEnabled option to false to disable input validation in DevExpress data editors located in the edit form or edit cells.

<DxGrid Data="Data"
        ...
        ValidationEnabled="false">
    @* ... *@
</DxGrid>

To disable validation in an editor, set its ValidationEnabled property to false.