[dev-v5] Form validation - part 1: Add FluentValidationSummary #4467
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds the FluentValidationSummary component as the first part of form validation support in Fluent UI Blazor v5. The component provides a Fluent Design-styled alternative to Blazor's standard ValidationSummary component.
Changes:
- Added
FluentValidationSummarycomponent with customizable error text coloring - Created comprehensive unit tests for validation message rendering, filtering, and state updates
- Added example form demonstrating validation with Fluent UI components
- Included a
Starshipsample data model with validation attributes
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Components/Forms/FluentValidationSummary.razor | Razor template for displaying validation messages in a styled unordered list |
| src/Core/Components/Forms/FluentValidationSummary.razor.cs | Component logic with configurable error text color and edit context integration |
| src/Core/Components/Forms/FluentValidationSummary.razor.css | Styling for validation error messages |
| tests/Core/Components/Forms/FluentValidationSummaryTests.cs | Unit tests covering message rendering, model filtering, and state change updates |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md | Documentation describing the validation summary component |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Examples/BasicForm.razor | Example form demonstrating the validation summary with various input components |
| examples/Tools/FluentUI.Demo.SampleData/Starship.cs | Sample data model with validation attributes for the example form |
| src/Core/Components/Field/FluentField.razor.css | Removed unused CSS rules for input slot styling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Forms.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Examples/BasicForm.razor
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Examples/BasicForm.razor
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Examples/BasicForm.razor
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Forms/Examples/BasicForm.razor
Outdated
Show resolved
Hide resolved
Move form code to codebehind Process review comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements the first part of the form validation components: the
FluentValidationSummary.This component can be used like the standard Blazor
ValidationSummarycomponent and styles the entries by means of the Fluent Design.Other parts that still need to be added:
FluentValidationMessageFor the
FluentInputBasederived components we can most probably use the Message related parameters of theFluentFieldcomponent. We might still need FluentValidationMessage to offer a way to use a Fluent Design compatible way of displaying validation messages for not-Fluent input components.FluentEditFormThis was only needed in v4 for
FluentWizard. To be determined if it is still needed once the v5FluentWizardhas been built