Telerik Validation Summary for Blazor

The Telerik Validation Summary for Blazor adds customization options on top of the standard .NET ValidationSummary, such as Template and Class parameters.

Using Validation Summary with TelerikForm

1. Add the <TelerikValidationSummary> tag inside the <FormValidation> child tag of the <TelerikForm>.
2. (optional) Disable the built-in validation messages of the Telerik Form to avoid repetition. Set ValidationMessageType="@FormValidationMessageType.None".

Use Telerik ValidationSummary in a Telerik Form

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@customer" Width="600px"
             ValidationMessageType="@FormValidationMessageType.None">
    <FormValidation>
        <DataAnnotationsValidator />
        <TelerikValidationSummary />
    </FormValidation>
</TelerikForm>

@code {
    private Customer customer = new Customer();

    public class Customer
    {
        [Required(ErrorMessage = "Please enter your name")]
        [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
        public string CustomerName { get; set; }

        [Required(ErrorMessage = "Please enter your age")]
        [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")]
        public int CustomerAge { get; set; }

        [Required(ErrorMessage = "Please enter your email")]
        [EmailAddress(ErrorMessage = "Enter a valid email address")]
        public string EmailAddress { get; set; }
    }
}

Using Validation Summary with EditForm

Use the <TelerikValidationSummary> tag instead of <ValidationSummary> directly in the Blazor EditForm component.

Use Telerik ValidationSummary in an EditForm

@using System.ComponentModel.DataAnnotations

<EditForm Model="@customer" width="600px">
    <DataAnnotationsValidator />
    <TelerikValidationSummary />
    <InputText @bind-Value="@customer.CustomerName"></InputText>
    <br />
    <InputNumber @bind-Value="@customer.CustomerAge"></InputNumber>
    <br />
    <InputText @bind-Value="@customer.EmailAddress"></InputText>
    <br />
    <input type="submit" value="Submit" />
</EditForm>

@code {
    private Customer customer = new Customer();

    public class Customer
    {
        [Required(ErrorMessage = "Please enter your name")]
        [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
        public string CustomerName { get; set; }

        [Required(ErrorMessage = "Please enter your age")]
        [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")]
        public int CustomerAge { get; set; }

        [Required(ErrorMessage = "Please enter your email")]
        [EmailAddress(ErrorMessage = "Enter a valid email address")]
        public string EmailAddress { get; set; }
    }
}

Template

The TelerikValidationSummary allows you to control its rendering via a nested <Template> tag. The context is an IEnumerable<string> collection of all error messages for the form.

Using TelerikValidationSummary Template

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@customer" Width="600px" ValidationMessageType="@FormValidationMessageType.None">
    <FormValidation>
        <DataAnnotationsValidator />
        <TelerikValidationSummary>
            <Template>
                @{ 
                    IEnumerable<string> validationSummaryContext = context;

                    @foreach (var message in validationSummaryContext)
                    {
                        <div>
                            <TelerikSvgIcon Icon="@SvgIcon.XOutline" />
                            <span>@message</span>
                        </div>
                    }
                }
            </Template>
        </TelerikValidationSummary>
    </FormValidation>
</TelerikForm>

@code {
    private Customer customer = new Customer();

    public class Customer
    {
        [Required(ErrorMessage = "Please enter your name")]
        [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
        public string CustomerName { get; set; }

        [Required(ErrorMessage = "Please enter your age")]
        [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")]
        public int CustomerAge { get; set; }

        [Required(ErrorMessage = "Please enter your email")]
        [EmailAddress(ErrorMessage = "Enter a valid email address")]
        public string EmailAddress { get; set; }
    }
}

Class

Use the Class parameter of the Validation Summary component to add a custom CSS class to the div.k-validation-summary. This element wraps the validation summary content.

Using TelerikValidationSummary Class

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@customer" Width="600px" ValidationMessageType="@FormValidationMessageType.None">
    <FormValidation>
        <DataAnnotationsValidator />
        <TelerikValidationSummary Class="validation-summary-class" />
    </FormValidation>
</TelerikForm>

<style>
    .validation-summary-class {
        background-color: lightblue;
    }
</style>

@code {
    private Customer customer = new Customer();

    public class Customer
    {
        [Required(ErrorMessage = "Please enter your name")]
        [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
        public string CustomerName { get; set; }

        [Required(ErrorMessage = "Please enter your age")]
        [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")]
        public int CustomerAge { get; set; }

        [Required(ErrorMessage = "Please enter your email")]
        [EmailAddress(ErrorMessage = "Enter a valid email address")]
        public string EmailAddress { get; set; }
    }
}

Next Steps

• Use TelerikValidationMessage
• Try TelerikValidationTooltip

See Also

• Live Demo: Validation
• Form Component