Radzen Blazor Components

CompareValidator

Demonstration and configuration of the Radzen Blazor CompareValidator component.

Basic Usage link

RadzenCompareValidator compares the user input against a predefined value or another component.

To use it perform these steps:

  1. Add an input component and set its Name. Data-bind its value to a model property via @bind-Value=@model.Property.
  2. Add RadzenCompareValidator and set its Component property to the Name of the input component. Set its Value property to the value you want to compare with (usually another model property).

Important! RadzenCompareValidator works only inside RadzenTemplateForm.

Here is a typical user registration form which checks if the user entered the same password.

Password

Console log

Coditional Validation link

To make the validator conditional you can set its Visible property. When set to false the validator will not run. In the example above Visible is set to !string.IsNullOrEmpty(model.RepeatPassword) - the validator will not run if RepeatPassword is empty.


    <RadzenCompareValidator Visible=@(!string.IsNullOrEmpty(model.RepeatPassword)) Value=@model.Password Component="RepeatPassword" Text="Passwords should be the same" Popup=@popup Style="position: absolute" />
    

Comparison operator link

By default RadzenCompareValidator checks if the component value is equal to Value. This can be changed via the Operator property.

Comparison operator
Equal

Console log

Appearance link

By default RadzenCompareValidator appears next to the component it validates. To make it appear below add Style="display:block".


    <RadzenNumeric Name="Count" @bind-Value=@model.Count />
    <RadzenCompareValidator Style="display:block" Component="Count" Text="Count should be less than 10" Operator="CompareOperator.LessThan" Value="10" />
    

To make it appear as a styled popup set its Popup property to true and set its CSS position to absolute. The validated component should have display: block so the validation message appears right below it.


    <RadzenNumeric Name="Count" @bind-Value=@model.Count Style="display:block" />
    <RadzenCompareValidator Style="position:absolute" Popup="true" Component="Count" Text="Count should be less than 10" Operator="CompareOperator.LessThan" Value="10" />
    

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙