starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

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

New Issue
Open
opened 2026-01-29 18:20:38 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:20:38 +00:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/1588
Author: @ace90210
Created: 7/9/2024
Status: ✅ Merged
Merged: 7/10/2024
Merged by: @akorchev

Base: master ← Head: master

📝 Commits (2)

  • 6a7a832 implement data annotation validator
  • dffac5f Rebase to latest master branch. Update the demo. Use PropertyAccess.Getter instead of reflection.

📊 Changes

5 files changed (+178 additions, -0 deletions)

View changed files

➕ Radzen.Blazor/RadzenDataAnnotationValidator.cs (+71 -0)
➕ RadzenBlazorDemos/Pages/DataAnnotationValidatorConfig.razor (+87 -0)
➕ RadzenBlazorDemos/Pages/DataAnnotationValidatorPage.razor (+11 -0)
📝 RadzenBlazorDemos/Pages/Index.razor (+1 -0)
📝 RadzenBlazorDemos/Services/ExampleService.cs (+8 -0)

📄 Description

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.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/1588 **Author:** [@ace90210](https://github.com/ace90210) **Created:** 7/9/2024 **Status:** ✅ Merged **Merged:** 7/10/2024 **Merged by:** [@akorchev](https://github.com/akorchev) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (2) - [`6a7a832`](https://github.com/radzenhq/radzen-blazor/commit/6a7a832a0a7c69e62aa828fbac208ab69487b6cc) implement data annotation validator - [`dffac5f`](https://github.com/radzenhq/radzen-blazor/commit/dffac5fc194f9aa53ce67979d1a6a2d2e8d57044) Rebase to latest `master` branch. Update the demo. Use PropertyAccess.Getter instead of reflection. ### 📊 Changes **5 files changed** (+178 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `Radzen.Blazor/RadzenDataAnnotationValidator.cs` (+71 -0) ➕ `RadzenBlazorDemos/Pages/DataAnnotationValidatorConfig.razor` (+87 -0) ➕ `RadzenBlazorDemos/Pages/DataAnnotationValidatorPage.razor` (+11 -0) 📝 `RadzenBlazorDemos/Pages/Index.razor` (+1 -0) 📝 `RadzenBlazorDemos/Services/ExampleService.cs` (+8 -0) </details> ### 📄 Description ## 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. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-29 18:20:38 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2821
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?