Validation Tools Overview

The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the Telerik Form or with any form that provides an EditContext like the EditForm provided by the framework.

Telerik UI for Blazor Ninja image

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

The Telerik form and validation tools don't add functionality over the standard ones. You should implement the desired custom validations first, and then you can replace it immediately with ours.

This article contains the following sections

Validation Tools

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

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

Integration

Here are two examples of integrating the Telerik validation extenders with forms:

Integration with the TelerikForm

You can seamlessly integrate the validation tools with the Form Component. In order to avoid doubling of validation message you should set the ValidationMessageType parameter of the form to FormValidationMessageType.None. You can also use them in the 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="Name" 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

@* Use the Telerik Validation tools inside an 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; }
    }
}

See Also

In this article
Not finding the help you need? Improve this article