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:
- Add an input component and set its
Name. Data-bind its value to a model property via@bind-Value=@model.Property. - Add RadzenCompareValidator and set its
Componentproperty to theNameof the input component. Set itsValueproperty 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.
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.
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
Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.
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.
Radzen Blazor for Visual Studio
Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT