Blazor Validation Message

Blazor Form offers versatile options for sorting and customizing the display of messages within your application. Messages can be categorized by type and presented using customizable templates, allowing you to create a tailored messaging system to enhance the user experience.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component featuresLearn about input component features

Simple Usage

<BlazorForm>
    <BlazorLabel>
        Username (required):
        <BlazorInputText @bind-Value="Username" UpdateOnHtmlEvent="oninput" />
    </BlazorLabel>
    <BlazorValidationMessage For="() => Username" />
    <BlazorButton type="submit" Variants="new[] {BaseVariants.Primary}">Submit</BlazorButton>
</BlazorForm>

@code {
    [Required]
    public string Username { get; set; } = "";
}

Templating Messages

<BlazorForm OnValidationCalled="ValidateCodeForm">
    <BlazorLabel>
        Code:
        <BlazorInputText @bind-Value="Code" UpdateOnHtmlEvent="oninput" FieldState="CodeState" />
    </BlazorLabel>
    <BlazorValidationMessage For="() => Code">
        <MessageTemplate Context="MessageCtx">
            @if (MessageCtx.Type is ValidationMessageType.Success)
            {
                <div class="text-bg-success">@MessageCtx.Message</div>
            }

            @if (MessageCtx.Type is ValidationMessageType.Info)
            {
                <div class="text-bg-info">@MessageCtx.Message</div>
            }

            @if (MessageCtx.Type is ValidationMessageType.Warning)
            {
                <div class="text-bg-warning">@MessageCtx.Message</div>
            }

            @if (MessageCtx.Type is ValidationMessageType.Error)
            {
                <div class="text-bg-danger">@MessageCtx.Message</div>
            }
        </MessageTemplate>
    </BlazorValidationMessage>
    <BlazorButton type="submit" Variants="new[] {BaseVariants.Primary}">Submit</BlazorButton>
</BlazorForm>

@code {
    public string Code { get; set; } = "";
    public FieldState CodeState { get; set; } = new();

    public void ValidateCodeForm()
    {
        CodeState.Messages.Remove("Message1", "Message2", "Message3", "Message4");

        CodeState.Messages.AddRange(new ValidationMessage[]
        {
            new ("Message1",ValidationMessageType.Success, "Success message"),
            new ("Message2",ValidationMessageType.Info, "Info message"),
            new ("Message3",ValidationMessageType.Warning, "Warning message"),
            new ("Message4",ValidationMessageType.Error, "Error message")
        });
    }
}

Filter & Sorting Message

By default, messages are displayed in the following order: Success, Info, Warning, Error. Developers have the flexibility to modify this order or selectively display specific message types according to their requirements.

Default
Filtered & sorted messages
<BlazorForm OnValidationCalled="ValidateOtpForm">
    <BlazorLabel>
        OTP:
        <BlazorInputText @bind-Value="Otp" UpdateOnHtmlEvent="oninput" FieldState="OtpState" />
    </BlazorLabel>
    <div class="border border-3 border-primary">
        Default
        <BlazorValidationMessage For="() => Otp" />
    </div>
    <div class="border border-3 border-primary">
        Filtered & sorted messages
        <BlazorValidationMessage For="() => Otp" MessageTypes="MessageTypes" />
    </div>
    <BlazorButton type="submit" Variants="new[] {BaseVariants.Primary}">Submit</BlazorButton>
</BlazorForm>

@code {
    public string Otp { get; set; } = "";
    public FieldState OtpState { get; set; } = new();
    public List<ValidationMessageType> MessageTypes { get; set; } = new()
    {
        ValidationMessageType.Error,
        ValidationMessageType.Info,
    };

    public void ValidateOtpForm()
    {
        OtpState.Messages.Remove("Message1", "Message2", "Message3", "Message4");

        OtpState.Messages.AddRange(new ValidationMessage[]
        {
            new("Message1",ValidationMessageType.Success, "Success message"),
            new("Message2",ValidationMessageType.Info, "Info message"),
            new("Message3",ValidationMessageType.Warning, "Warning message"),
            new("Message4",ValidationMessageType.Error, "Error message")
        });
    }
}

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorValidationMessage d-flex flex-column
BlazorValidationMessageContent validation-message
BlazorValidationMessageContent.error text-danger
BlazorValidationMessageContent.warning text-warning
BlazorValidationMessageContent.info text-info
BlazorValidationMessageContent.success text-success

Parameters

BlazorValidationMessage

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
For Expression<Func<TField>> Specify the field for displaying message.
MessageTypes List<ValidationMessageType> Define the order and filtering of validation messages.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙