Utilities

Validation

BlazorUI form components inherit from InputBase, Blazor's native form component. Therefore, validation can be performed in the same way as EditForm. Furthermore, BlazorUI allows the use of FluentValidation by adding a reference to CdCSharp.BlazorUI.FormsFluentValidation.

Data Annotations

The easiest way to validate forms is using Data Annotations. Define rules directly on your model with attributes like [Required], [MinLength], or [EmailAddress].

Wrap your inputs in an EditForm, add the DataAnnotationsValidator component, and use ValidationMessage to display field errors.

Learn more in Microsoft Docs — Blazor Form Validation.


Data Annotations in action


RAZOR 
<EditForm Model="@_modelAnnotations" OnValidSubmit="HandleValidSubmitAnnotations">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <br />

    <BOBInputText @bind-Value="_modelAnnotations.Name"
                  Label="Name"
                  Variant="BOBInputVariant.Outlined" />
    <ValidationMessage For="@(() => _modelAnnotations.Name)" />

    <BOBInputDropdown @bind-Value="_modelAnnotations.Role"
                      Label="Role"
                      Searchable="true"
                      Variant="BOBInputVariant.Outlined">
        <DropdownOption Value="@Role.Admin" Text="Admin" />
        <DropdownOption Value="@Role.Editor" Text="Editor" />
        <DropdownOption Value="@Role.Viewer" Text="Viewer" />
        <DropdownOption Value="@Role.Guest" Text="Guest" />
    </BOBInputDropdown>
    <ValidationMessage For="@(() => _modelAnnotations.Role)" />

    <br /><br />
    <button type="submit">Submit</button>
    <button type="button" @onclick="ResetAnnotations">Reset</button>
</EditForm>

@if (_sentDataAnotations)
{
    <div class="bui-mt-4">
        <p><strong>Name:</strong> @_modelAnnotations.Name</p>
        <p><strong>Role:</strong> @_modelAnnotations.Role</p>
    </div>
}

FluentValidation

For more complex scenarios, you can use FluentValidation. It allows you to define validation rules in dedicated validator classes with full support for dependency injection, conditional rules, and reusable logic.

BlazorUI form components work seamlessly with FluentValidation because they read validation state directly from the EditContext — no component changes are required.


1. Configure Services

Register FluentValidation validators in your dependency injection container (usually in Program.cs):

CSHARP 
builder.Services.AddBOBFluentValidation<Program>();

or use this to register validators from executing Assembly

CSHARP 
builder.Services.AddBOBFluentValidation();

2. Use the Validator

Add DataAnnotationsValidator with BOBFluentValidator inside your EditForm:


FluentValidation in action


RAZOR 
<EditForm Model="@_modelFluent" OnValidSubmit="HandleValidSubmitFluent">
    <BOBFluentValidator />
    <ValidationSummary />
    <br />

    <BOBInputText @bind-Value="_modelFluent.Name"
                  Label="Name"
                  Variant="BOBInputVariant.Outlined" />
    <ValidationMessage For="@(() => _modelFluent.Name)" />

    <BOBInputDropdown @bind-Value="_modelFluent.Role"
                      Label="Role"
                      Searchable="true"
                      Variant="BOBInputVariant.Outlined">
        <DropdownOption Value="@Role.Admin" Text="Admin" />
        <DropdownOption Value="@Role.Editor" Text="Editor" />
        <DropdownOption Value="@Role.Viewer" Text="Viewer" />
        <DropdownOption Value="@Role.Guest" Text="Guest" />
    </BOBInputDropdown>
    <ValidationMessage For="@(() => _modelFluent.Role)" />

    <br /><br />
    <button type="submit">Submit</button>
    <button type="button" @onclick="ResetFluent">Reset</button>
</EditForm>

Learn more at FluentValidation Docs.