[PR #1588] Add RadzenDataAnnotationValidator to Support Data Annotation Validation #2823

New Issue

claunia · 2026-01-29T18:20:38Z

claunia commented

2026-01-29 18:20:38 +00:00

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/1588

State: closed
Merged: Yes

Pull Request Description:

Overview

This PR introduces a new DataAnnotationValidator component to the Radzen Blazor library. The DataAnnotationValidator leverages .NET's data annotations to validate form fields, providing a seamless and integrated way to enforce validation rules defined on model properties.

Features

RadzenDataAnnotationValidator Component: A new validator component that uses data annotations for validation.
- Validates model properties using [Required], [StringLength], [Compare], and other data annotation attributes.
- Displays validation messages based on the data annotation error messages.
- Supports both inline and popup validation messages.

Example Usage

An example page has been added to the demo site to showcase the RadzenDataAnnotationValidator. Below is an example of how to use this new component in a Blazor page:

UserForm.razor

@page "/dataannotationvalidator"
@using Radzen
@using System.Text.Json
@using System.ComponentModel.DataAnnotations

<RadzenExample Name="DataAnnotationValidator">
    <div class="container my-4">
        <div class="row">
            <div class="col">
                <RadzenCard class="w-100 mb-4" >
                <RadzenCheckBox @bind-Value=@popup Name="popup"></RadzenCheckBox>
                    <RadzenLabel Text="Display validators as popup" Component="popup" Style="margin-left: 8px; vertical-align: middle;" />
                </RadzenCard>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 offset-lg-3">
                <RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
                    <RadzenFieldset Text="Personal information">
                        <div class="row mb-5">
                            <div class="col-md-4">
                                <RadzenLabel Text="Username" Component="Username" />
                            </div>
                            <div class="col">
                                <RadzenTextBox style="display: block" Name="Username" @bind-Value=@model.Username class="w-100" />
                                <RadzenFieldValidator Component="Username" Popup=@popup Style="position: absolute" />
                            </div>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-4">
                                <RadzenLabel Text="Password" Component="Password" />
                            </div>
                            <div class="col">
                                <RadzenPassword style="display: block" Name="Password" Placeholder="Enter password..." @bind-Value=@model.Password class="w-100" aria-label="enter password" />
                                <RadzenFieldValidator Component="Password" Popup=@popup Style="position: absolute" />
                            </div>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-4">
                                <RadzenLabel Text="Confirm Password" Component="ConfirmPassword" />
                            </div>
                            <div class="col">
                                <RadzenPassword style="display: block" Name="ConfirmPassword" Placeholder="Confirm password..." @bind-Value=@model.ConfirmPassword class="w-100" aria-label="confirm password" />
                                <RadzenFieldValidator Component="ConfirmPassword" Popup=@popup Style="position: absolute" />
                            </div>
                        </div>
                        <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" ></RadzenButton>
                    </RadzenFieldset>
                </RadzenTemplateForm>
            </div>
        </div>
    </div>
</RadzenExample>

<EventConsole @ref=@console />

@code {
    class Model
    {
        [Required]
        [StringLength(15, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long", MinimumLength = 4)]
        public string Username { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match")]
        public string ConfirmPassword { get; set; }
    }

    bool popup;

    Model model = new Model();
    EventConsole console;

    void OnSubmit(Model model)
    {
        console.Log($"Submit: {JsonSerializer.Serialize(model, new JsonSerializerOptions() {  WriteIndented = true })}");
    }

    void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
    {
        console.Log($"InvalidSubmit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() {  WriteIndented = true })}");
    }
}

Changes to Demo Site

New Example Page: Added a new example page to the demo site, showcasing how to use the RadzenDataAnnotationValidator component.
Documentation: Updated the example documentation to include a detailed usage guide for the new component.

Instructions

To use the RadzenDataAnnotationValidator, simply include it in your form and bind it to the component you want to validate. The validator will automatically use the data annotations defined on the model property to validate the input.

Additional Notes

The validator supports displaying validation messages as popups or inline, based on the Popup parameter.
The implementation is consistent with other Radzen validators, ensuring ease of integration and usage.

Thank you for considering this PR. I look forward to your feedback and hope this addition will be beneficial to the Radzen community.

**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/1588 **State:** closed **Merged:** Yes --- ## Pull Request Description: ### Overview This PR introduces a new `DataAnnotationValidator` component to the Radzen Blazor library. The `DataAnnotationValidator` leverages .NET's data annotations to validate form fields, providing a seamless and integrated way to enforce validation rules defined on model properties. ### Features - **RadzenDataAnnotationValidator Component**: A new validator component that uses data annotations for validation. - Validates model properties using `[Required]`, `[StringLength]`, `[Compare]`, and other data annotation attributes. - Displays validation messages based on the data annotation error messages. - Supports both inline and popup validation messages. ### Example Usage An example page has been added to the demo site to showcase the `RadzenDataAnnotationValidator`. Below is an example of how to use this new component in a Blazor page: #### UserForm.razor ```razor @page "/dataannotationvalidator" @using Radzen @using System.Text.Json @using System.ComponentModel.DataAnnotations <RadzenExample Name="DataAnnotationValidator"> <div class="container my-4"> <div class="row"> <div class="col"> <RadzenCard class="w-100 mb-4" > <RadzenCheckBox @bind-Value=@popup Name="popup"></RadzenCheckBox> <RadzenLabel Text="Display validators as popup" Component="popup" Style="margin-left: 8px; vertical-align: middle;" /> </RadzenCard> </div> </div> <div class="row"> <div class="col-lg-6 offset-lg-3"> <RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit> <RadzenFieldset Text="Personal information"> <div class="row mb-5"> <div class="col-md-4"> <RadzenLabel Text="Username" Component="Username" /> </div> <div class="col"> <RadzenTextBox style="display: block" Name="Username" @bind-Value=@model.Username class="w-100" /> <RadzenFieldValidator Component="Username" Popup=@popup Style="position: absolute" /> </div> </div> <div class="row mb-5"> <div class="col-md-4"> <RadzenLabel Text="Password" Component="Password" /> </div> <div class="col"> <RadzenPassword style="display: block" Name="Password" Placeholder="Enter password..." @bind-Value=@model.Password class="w-100" aria-label="enter password" /> <RadzenFieldValidator Component="Password" Popup=@popup Style="position: absolute" /> </div> </div> <div class="row mb-5"> <div class="col-md-4"> <RadzenLabel Text="Confirm Password" Component="ConfirmPassword" /> </div> <div class="col"> <RadzenPassword style="display: block" Name="ConfirmPassword" Placeholder="Confirm password..." @bind-Value=@model.ConfirmPassword class="w-100" aria-label="confirm password" /> <RadzenFieldValidator Component="ConfirmPassword" Popup=@popup Style="position: absolute" /> </div> </div> <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" ></RadzenButton> </RadzenFieldset> </RadzenTemplateForm> </div> </div> </div> </RadzenExample> <EventConsole @ref=@console /> @code { class Model { [Required] [StringLength(15, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long", MinimumLength = 4)] public string Username { get; set; } [Required] [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm password")] [Compare("Password", ErrorMessage = "The password and confirmation password do not match")] public string ConfirmPassword { get; set; } } bool popup; Model model = new Model(); EventConsole console; void OnSubmit(Model model) { console.Log($"Submit: {JsonSerializer.Serialize(model, new JsonSerializerOptions() { WriteIndented = true })}"); } void OnInvalidSubmit(FormInvalidSubmitEventArgs args) { console.Log($"InvalidSubmit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true })}"); } } ``` ### Changes to Demo Site - **New Example Page**: Added a new example page to the demo site, showcasing how to use the `RadzenDataAnnotationValidator` component. - **Documentation**: Updated the example documentation to include a detailed usage guide for the new component. ### Instructions To use the `RadzenDataAnnotationValidator`, simply include it in your form and bind it to the component you want to validate. The validator will automatically use the data annotations defined on the model property to validate the input. ### Additional Notes - The validator supports displaying validation messages as popups or inline, based on the `Popup` parameter. - The implementation is consistent with other Radzen validators, ensuring ease of integration and usage. Thank you for considering this PR. I look forward to your feedback and hope this addition will be beneficial to the Radzen community.

claunia added the pull-request label 2026-01-29 18:20:38 +00:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2823