How to perform validations in Blazor?

Blazor provides support for validating form input using data annotations with the built-in DataAnnotationsValidator.

The ValidationSummary can be used to display error messages for all the fields. It can also be used to display custom error messages.

The <DataAnnotationsValidator/> and <ValidationSummary /> components only validate top-level properties. It does not validate the collection or complex-type properties of the model class. The Model class needs to be bound to the EditForm component.

Blazor provides ObjectGraphDataAnnotationsValidator to validate the entire model object including collection and complex-type properties. This component is defined in Microsoft.AspNetCore.Blazor.DataAnnotations.Validation package and currently it is in an experimental stage.

@page "/employeedetails"
@using System.ComponentModel.DataAnnotations;

<EditForm Model="@_employee" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
 <ValidationSummary />
    <InputText id="name" @bind-Value="_employee.Name" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    public class Employee
    {
        [Required]
        [StringLength(10, ErrorMessage = "Name is too long.")]
        public string Name { get; set; }
    }

    private Employee _employee = new Employee();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }
}