Blazor Validation Tools Overview

Telerik UI for Blazor provides different ways to show and customize validation messages. The validation tools can be used together with the Telerik Form or with any form that provides an EditContext like the standard .NET EditForm.

The Telerik Blazor validation tools let you match the style of your validation messages to all other Telerik Blazor components in your app. The validation tools do not expose API or settings for specific validation logic. You need to handle the validation logic separately and then use the Telerik Blazor UI components to display messages to the end user.

The Validation Tools component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Validation Tools

Telerik provides the following validation tools to help you style your form validation:

• Validation Summary
• Validation Message
• Validation Tooltip

These components add customization options on top of the standard validation tools the frameworks provides - ValidationSummary and ValidationMessage

Integration with the TelerikForm

You can seamlessly integrate the validation tools with the Form Component. To avoid duplication of validation messages, set the ValidationMessageType parameter of the form to FormValidationMessageType.None. You can also use the validation components in templates with custom editors that you can define with your own code.

@* Disable the default validation messages from the Telerik Form and use the validation tools instead *@

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person" ValidationMessageType="@FormValidationMessageType.None">
    <FormValidation>
        <DataAnnotationsValidator />
        <TelerikValidationSummary />
    </FormValidation>

    <FormItems>
        <FormItem LabelText="Name" Field="@nameof(Person.Name)" Hint="This editor uses TelerikValidationTooltip" Id="NameFieldVsalidationTooltip" />
        <TelerikValidationTooltip For="@( () => person.Name)" TargetSelector="#NameFieldVsalidationTooltip" />

        <FormItem LabelText="Age" Field="@nameof(Person.Age)" Hint="This editor uses TelerikValidationMessage" />
        <TelerikValidationMessage For="@( () => person.Age)" />

        <FormItem LabelText="Married" Field="@nameof(Person.IsMarried)" Hint="This editor uses TelerikValidationTooltip" Id="IsMarriedFieldValidationTooltip" />
        <TelerikValidationTooltip For="@( () => person.IsMarried)" TargetSelector="#IsMarriedFieldValidationTooltip" />
    </FormItems>
</TelerikForm>

@code {
    Person person = new Person();

    public class Person
    {
        [Required]
        public string Name { get; set; }

        [Required]
        [Range(10,150, ErrorMessage ="The age should be between 10 and 150")]
        public int? Age { get; set; }

        [Required]
        public bool IsMarried { get; set; }
    }
}

Integration with the Microsoft EditForm

@using System.ComponentModel.DataAnnotations

<EditForm Model="@person">
    <DataAnnotationsValidator />

    <TelerikValidationSummary />

    <p>
        <label for="NameFieldId">Name</label>
        <TelerikTextBox @bind-Value="@person.Name" Id="NameFieldId"></TelerikTextBox>
        <TelerikValidationTooltip For="@( () => person.Name)" TargetSelector="#NameFieldId" />
    </p>

    <p>
        <label for="AgeFieldId">Age</label>
        <TelerikNumericTextBox @bind-Value="@person.Age" Id="AgeFieldId"></TelerikNumericTextBox>
        <TelerikValidationMessage For="@( () => person.Age)" />
    </p>

    <p>
        <label for="IsMarriedFieldId">Is Married</label>
        <TelerikCheckBox @bind-Value="@person.IsMarried" Id="IsMarriedFieldId"></TelerikCheckBox>
        <TelerikValidationTooltip For="@( () => person.IsMarried)" TargetSelector="#IsMarriedFieldId" />
    </p>

    <TelerikButton ButtonType="ButtonType.Submit">Submit</TelerikButton>
</EditForm>

@code {
    Person person = new Person();

    public class Person
    {
        [Required]
        public string Name { get; set; }

        [Required]
        [Range(10, 150, ErrorMessage = "The age should be between 10 and 150")]
        public int? Age { get; set; }

        [Required]
        public bool IsMarried { get; set; }
    }
}

When using the Form EditContext parameter together with validation components or Form item <Template>s, make sure to create the EditContext from the model instance, which is used by the validation components and inside the Form item templates. Otherwise, the Form will not update the correct object instance and validation will not work as expected.

The Telerik components for Blazor do not perform the actual validation of the model. Validation is managed by the EditContext. The role of the Telerik components is to call EditContext methods, subscribe to EditContext events, retrieve validation messages, and display them. If a validation scenario does not work as expected, check the behavior in a standard Blazor <EditForm> to verify if the issue is related to the Telerik components.

Next Steps

• Explore TelerikValidationSummary
• Use TelerikValidationMessage
• Try TelerikValidationTooltip

See Also

• Live Demo: Validation
• Form Component