Telerik Validation Summary for Blazor
The Telerik Validation Summary for Blazor adds built-in styling and customization options on top of the standard .NET ValidationSummary, such as Template and Class parameters.
The Telerik ValidationSummary component must be placed inside a Form. Refer to the following sections for additional information and examples with the Telerik Form and standard Blazor <EditForm>.
Using with TelerikForm
There are three ways to add a Telerik ValidationSummary to a Telerik Form:
- To display validation messages at the top of the Telerik Form, add the
<TelerikValidationSummary>tag inside the<FormValidation>child tag of the<TelerikForm>. - To display validation messages at the bottom of the Telerik Form, add the
<TelerikValidationSummary>tag inside the<FormButtons>template. Wrap the<TelerikValidationSummary>and all buttons in a single HTML element, otherwise the validation messages will shrink horizontally and display on the same line as the buttons. - To display validation messages anywhere else in the Telerik Form, add the
<TelerikValidationSummary>tag inside a<FormItemsTemplate>child tag of the<TelerikForm>.
Optionally, disable the built-in inline validation messages of the Telerik Form to avoid repetition.
Use Telerik ValidationSummary at the top of a TelerikForm
Use Telerik ValidationSummary at the bottom of a TelerikForm
Using with EditForm
In a standard Blazor EditForm, place a <TelerikValidationSummary /> instead of a <ValidationSummary /> anywhere inside the Form.
Use Telerik ValidationSummary in an EditForm
Template
The Telerik ValidationSummary allows you to customize its rendering with a nested <Template> tag. The template context is an IEnumerable<string> collection of all messages for the validated model.
Using ValidationSummary Template
Class
Use the Class parameter of the Validation Summary to add a custom CSS class to the div.k-validation-summary container element. If you need to override the color styles, use CSS specificity that is higher than 2 CSS classes.
Using TelerikValidationSummary Class
<TelerikValidationSummary Class="bold-blue" />
<style>
div.bold-blue.k-validation-summary {
font-weight: bold;
color: blue;
}
</style>