Collect every validation message of a form in one clear block, so users do not have to hunt for what went wrong.
Why it helps
- All errors in one place
- Works with EditForm
- Accessible
Where it fits
- Long forms
- Checkout
- Registration
Example
<EditForm Model="_model" OnValidSubmit="@(() => _sent = true)">
<DataAnnotationsValidator />
<ErrorSummary />
<TextField @bind-Value="_model.Name" Label="Name" />
<TextField @bind-Value="_model.Email" Label="Email" />
<Button Type="submit">Send</Button>
@if (_sent)
{
<Alert Severity="Severity.Success">Sent.</Alert>
}
</EditForm>
@code {
private readonly Contact _model = new();
private bool _sent;
private sealed class Contact
{
[Required(ErrorMessage = "Name is required.")]
public string? Name { get; set; }
[Required(ErrorMessage = "Email is required.")]
[EmailAddress(ErrorMessage = "Email is not valid.")]
public string? Email { get; set; }
}
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.