ValidationSummary

March 25, 2026 · View on GitHub

The ValidationSummary component displays a summary of all validation errors on a form. In BlazorWebFormsComponents, this component is named AspNetValidationSummary to avoid conflicts with Blazor's built-in ValidationSummary component. This tag name may change in future versions to align more closely with the original ASP.NET control.

Original Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.validationsummary?view=netframework-4.8

!!! note "Component Name" Use <AspNetValidationSummary> in Blazor markup. The name differs from the Web Forms <asp:ValidationSummary> to avoid conflicts with Blazor's built-in <ValidationSummary> component.

Features Supported in Blazor

DisplayMode — How errors are displayed: BulletList, List, or SingleParagraph
HeaderText — Text displayed above the error list
ShowSummary — Whether to display the summary (default: true)
ValidationGroup — Only show errors from validators in the specified group
CssClass — CSS class applied to the summary container
ForeColor — Text color for error messages
Enabled — Enable or disable the summary
Visible — Show or hide the component
All style properties (BackColor, BorderColor, BorderStyle, BorderWidth, Width, Height, Font)

Web Forms Features NOT Supported

ShowMessageBox — JavaScript alert boxes are not supported; use inline display instead
EnableClientScript — Blazor uses its own validation model (stub parameter exists for migration compatibility)

Syntax Comparison

=== "Web Forms"

```html
<asp:ValidationSummary
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DisplayMode="BulletList|List|SingleParagraph"
    EnableClientScript="True|False"
    Enabled="True|False"
    Font-Bold="True|False"
    ForeColor="color name|#dddddd"
    HeaderText="string"
    Height="size"
    ID="string"
    runat="server"
    ShowMessageBox="True|False"
    ShowSummary="True|False"
    ValidationGroup="string"
    Visible="True|False"
    Width="size"
/>
```

=== "Blazor"

```razor
<AspNetValidationSummary
    BackColor="WebColor.LightYellow"
    BorderColor="WebColor.Red"
    BorderStyle="BorderStyle.Solid"
    CssClass="validation-summary"
    DisplayMode="ValidationSummaryDisplayMode.BulletList"
    Enabled="true"
    ForeColor="WebColor.Red"
    HeaderText="Please correct the following errors:"
    ShowSummary="true"
    ValidationGroup="MyGroup"
    Visible="true"
/>
```

Properties

Property	Type	Default	Description
`DisplayMode`	`ValidationSummaryDisplayMode`	`BulletList`	How errors are rendered
`HeaderText`	`string`	`null`	Text shown above the error list
`ShowSummary`	`bool`	`true`	Whether to display the summary
`ValidationGroup`	`string`	`null`	Filter errors by validation group
`CssClass`	`string`	`null`	CSS class for the container
`ForeColor`	`WebColor`	`default`	Text color of error messages
`BackColor`	`WebColor`	`default`	Background color
`BorderColor`	`WebColor`	`default`	Border color
`BorderStyle`	`BorderStyle`	`NotSet`	Border style
`BorderWidth`	`Unit`	`default`	Border width
`Width`	`Unit`	`default`	Container width
`Height`	`Unit`	`default`	Container height
`Font`	`FontInfo`	`new FontInfo()`	Font properties (Bold, Italic, etc.)
`Enabled`	`bool`	`true`	Enable or disable the component
`Visible`	`bool`	`true`	Show or hide the component
`EnableClientScript`	`bool`	`true`	Stub for migration compatibility (no effect)
`ShowMessageBox`	`bool`	`false`	Stub for migration compatibility (no effect)

DisplayMode Values

Value	Description	Rendered As
`BulletList`	Bulleted list of errors (default)	`<ul><li>...</li></ul>`
`List`	Plain list of errors	Line-break separated text
`SingleParagraph`	All errors in one paragraph	Space-separated text

Examples

Basic Validation Summary

<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <InputText @bind-Value="model.Name" />
    <RequiredFieldValidator ControlToValidate="Name"
                            Text="*"
                            ErrorMessage="Name is required" />

    <InputText @bind-Value="model.Email" />
    <RequiredFieldValidator ControlToValidate="Email"
                            Text="*"
                            ErrorMessage="Email is required" />

    <AspNetValidationSummary HeaderText="Please fix the following errors:" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    private var model = new FormModel();
    
    private void HandleSubmit()
    {
        // Process form submission
    }
}

With ValidationGroup

@using BlazorWebFormsComponents.Validations

<ValidationGroupProvider>
    <EditForm Model="@model">
        <InputText @bind-Value="model.Name" />
        <RequiredFieldValidator ControlToValidate="Name"
                                Text="*"
                                ErrorMessage="Name is required"
                                ValidationGroup="Personal" />

        <AspNetValidationSummary
            HeaderText="Personal Info Errors:"
            ValidationGroup="Personal"
            DisplayMode="ValidationSummaryDisplayMode.BulletList" />

        <Button Text="Validate" ValidationGroup="Personal" />
    </EditForm>
</ValidationGroupProvider>

@code {
    private var model = new FormModel();
}

Display Modes

@* Bulleted list (default) *@
<AspNetValidationSummary 
    HeaderText="Errors:"
    DisplayMode="ValidationSummaryDisplayMode.BulletList" />

@* Plain list *@
<AspNetValidationSummary 
    HeaderText="Errors:"
    DisplayMode="ValidationSummaryDisplayMode.List" />

@* Single paragraph *@
<AspNetValidationSummary 
    HeaderText="Errors:"
    DisplayMode="ValidationSummaryDisplayMode.SingleParagraph" />

Styled Summary

<AspNetValidationSummary
    HeaderText="Errors occurred:"
    CssClass="alert alert-danger"
    ForeColor="WebColor.DarkRed"
    BackColor="WebColor.LightPink"
    BorderColor="WebColor.Red"
    BorderStyle="BorderStyle.Solid"
    BorderWidth="1px"
    DisplayMode="ValidationSummaryDisplayMode.BulletList" />

Multiple Validation Groups

@using BlazorWebFormsComponents.Validations

<ValidationGroupProvider>
    <EditForm Model="@model" OnValidSubmit="HandleSubmit">
        @* Personal Information Section *@
        <h3>Personal Information</h3>
        <InputText @bind-Value="model.FirstName" />
        <RequiredFieldValidator ControlToValidate="FirstName"
                                ErrorMessage="First name is required"
                                ValidationGroup="Personal" />

        <InputText @bind-Value="model.LastName" />
        <RequiredFieldValidator ControlToValidate="LastName"
                                ErrorMessage="Last name is required"
                                ValidationGroup="Personal" />

        <AspNetValidationSummary
            HeaderText="Personal Info Errors:"
            ValidationGroup="Personal"
            CssClass="alert alert-danger" />

        @* Business Information Section *@
        <h3>Business Information</h3>
        <InputText @bind-Value="model.Company" />
        <RequiredFieldValidator ControlToValidate="Company"
                                ErrorMessage="Company is required"
                                ValidationGroup="Business" />

        <InputText @bind-Value="model.JobTitle" />
        <RequiredFieldValidator ControlToValidate="JobTitle"
                                ErrorMessage="Job title is required"
                                ValidationGroup="Business" />

        <AspNetValidationSummary
            HeaderText="Business Info Errors:"
            ValidationGroup="Business"
            CssClass="alert alert-danger" />

        <Button Text="Validate Personal" ValidationGroup="Personal" />
        <Button Text="Validate Business" ValidationGroup="Business" />
        <Button Text="Submit All" CausesValidation="false" OnClick="HandleSubmit" />
    </EditForm>
</ValidationGroupProvider>

@code {
    private var model = new FormModel();
    
    private void HandleSubmit()
    {
        // Process form submission
    }
}

With Multiple Validators

<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <div>
        <Label Text="Email:" AssociatedControlID="email" />
        <InputText id="email" @bind-Value="model.Email" />
        <RequiredFieldValidator ControlToValidate="Email"
                                ErrorMessage="Email is required"
                                Text="*" />
        <RegularExpressionValidator ControlToValidate="Email"
                                    ValidationExpression="^[\w.-]+@[\w.-]+\.\w+$"
                                    ErrorMessage="Email format is invalid"
                                    Text="Invalid format" />
    </div>

    <AspNetValidationSummary
        HeaderText="Please correct the following errors:"
        DisplayMode="ValidationSummaryDisplayMode.BulletList"
        CssClass="validation-summary alert alert-danger" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private var model = new FormModel();
    
    private void HandleSubmit()
    {
        // Form is valid and ready to submit
    }
}

HTML Output

Bulleted List (default):

<!-- Blazor Input -->
<AspNetValidationSummary 
    HeaderText="Errors:"
    DisplayMode="ValidationSummaryDisplayMode.BulletList" />

<!-- Rendered HTML (with errors) -->
<div title="">
    <b>Errors:</b>
    <ul>
        <li>Name is required</li>
        <li>Email format is invalid</li>
    </ul>
</div>

Plain List:

<!-- Blazor Input -->
<AspNetValidationSummary 
    DisplayMode="ValidationSummaryDisplayMode.List" />

<!-- Rendered HTML -->
<div title="">
    Name is required<br>
    Email format is invalid<br>
</div>

Migration Notes

Change tag name — Replace <asp:ValidationSummary> with <AspNetValidationSummary>
Remove runat="server" — Not needed in Blazor
Remove ShowMessageBox — JavaScript alert boxes are not supported in Blazor
Remove EnableClientScript — Not applicable in Blazor (though the parameter exists as a stub)
Update DisplayMode enum — Change DisplayMode="BulletList" to DisplayMode="ValidationSummaryDisplayMode.BulletList"
Colors use WebColor enum — Instead of color name strings
Must be inside <EditForm> — Requires a cascading EditContext

Migration Example

=== "Web Forms"

```html
<asp:ValidationSummary
    ID="vs1"
    HeaderText="The following errors occurred:"
    DisplayMode="BulletList"
    ForeColor="Red"
    ShowMessageBox="false"
    ShowSummary="true"
    runat="server" />
```

=== "Blazor"

```razor
<AspNetValidationSummary
    HeaderText="The following errors occurred:"
    DisplayMode="ValidationSummaryDisplayMode.BulletList"
    ForeColor="WebColor.Red"
    ShowSummary="true" />
```

!!! tip "ErrorMessage vs Text" Validators have both Text (displayed inline next to the field) and ErrorMessage (displayed in the ValidationSummary). Set both for the best user experience — a short indicator like "*" for Text and a descriptive message for ErrorMessage.