In WinUI 3 - What is the correct way to display validation error message text under each input field in XAML?

[RossCoeH]

Describe the bug

Much has changed in WinUI-3 styles since WPF 4.5, but I cannot find anything written on how to present a user with error text just below the input field. Specifically wishing to provide several fields on a control, but show the error for each separately and underneath 2 input TextBoxes on a form- just like this hacked image from the WinUI 3 gallery:

A good example for WPF 4.5 (2013) exists at https://social.technet.microsoft.com/wiki/contents/articles/19490.wpf-4-5-validating-data-in-using-the-inotifydataerrorinfo-interface.aspx, but of course the syntax has changed since then so the concepts are relevant but the examples are no longer valid.

The WinUI 3 gallery does not yet show any detail under InputValidation so no examples there.
XamlBrewer (June 2021) does show an implementation that collects all errors on a usercontrol - but his does not separate them for each field. You find his work here: https://github.com/XamlBrewer/UWP-MVVM-Toolkit-Validation-Sample.

The default styles for TextBox (generic.xaml) do show an ErrorPresenter in the Visual States but the content is currently blank unlike the DescriptionPresenter as in this code below:
` <ContentPresenter x:Name="ErrorPresenter"
x:Load="True"
Grid.Row="1"
Grid.Column="3"
Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"

                        AutomationProperties.AccessibilityView="Raw" />
          <ContentPresenter x:Name="DescriptionPresenter"
                        Grid.Row="2"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        Content="{TemplateBinding Description}"
                        Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                        AutomationProperties.AccessibilityView="Raw"
                        x:Load="False"/>`

There are also VisualStates in generic.xaml of
<VisualStateGroup x:Name="InputValidationEnabledStates"> <VisualState x:Name="CompactValidationEnabled" /> <VisualState x:Name="InlineValidationEnabled"> <VisualState.Setters> <Setter Target="ErrorPresenterRow.MinHeight" Value="20" /> </VisualState.Setters> </VisualState> <VisualState x:Name="ValidationDisabled" /> </VisualStateGroup>
But I cannot find a way to switch these states only - Is is actually possible to do at present time (June 2022) or are we waiting for validation to be enabled in the TextBox controls.

Can someone tell me how best to do this at current time.

I am using Community Toolkit with MVVM and ObservableValidator. Validation errors are currently a private field of type dictionary - do I have to extract public error message for each input field so I can bind a text field to them - seems a lot of work - am I missing the point of these new WinUI 3 controls, or am I simply waiting for something that is not there yet?

Steps to reproduce the bug

Documentation on WinUI 3 xaml validation is missing

Expected behavior

Love to see an example or documentation on how to display messages in XAML from INotifyDataErrorInfo interface

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.1.2

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 10 (21H2): Build 19044

Additional context

No response

[Mudz-Dev]

Ran into this as well man. Currently im just populating a collection with the GetErrors method and showing them in a listview, not ideal though. There is a parameter for property name on the GetErrors method as well so I guess could have a user control with a textblock that you put under each control on the xaml and it could look up the geterrors to set the text. But I havent figured out the MVVM approach to that yet.

[sude22]

Any new information on this one?

[Laim]

Looking for this as well. Really weird for it to not be there imo.

[PaoloComand]

How can be notified an error during mainWindow initialization in desktop app?
There is no XamlRoot because window is not started. So ContentDialog cant be used.
What is a decent alternative?

[eduardocp]

Any news?

[TOKN2]

Any news?

[darsh-agrawal71]

Still greyed out

[KOPCSAKPATRIK1]

I also run into that problem, any news or plans for this?

[cesarchefinho]

i think that this issue can be fixed migrating code to avalonia ui.

the added bonus is an avalonia xaml designer plugin for visual studio that microsoft refused to make for winui

[Laim]

That's not really a fix but a workaround. It might be fine for some people but it's not going to work on things that are already done

[thomasjoscht]

+1 for this discussion. Totally weird that this elementary feature is not available in 2023 newest Microsoft application framework! Looking back in history to origin of Windows Forms highlighting the word „forms“ in it - conceptional build for input forms. Nowadays it seems animations and transparency is more important than business cases 😔

[RossCoeH]

Totally agree, I find it very surprising that no one has yet proposed or shown a working strategy despite an unfinished stub for validation on community dic pages. I first asked 8 months ago

[omikhailov]

What's the problem? If you need to place a text block, you can just... place a text block. Is this a task for which framework support is needed?

[PaoloComand]

omikhailov, we are speaking about error notification during initialization. There is no window to place a textbox. If you could place a textbox would be present a window and a XamlRoot. So you ahve no problem to use a ContentDialog.

[ghost]

I recently saw this discussion and decided to build a quick sample with TextBox - it could definitely use support from WinUI, having an equivalent of INotifyDataErrorInfo (and maybe a new interface for controls that support input validation) would make this scenario a whole lot nicer. This solution is not fully polished, I might work on a nicer version of it eventually, but for now it's just a proof of concept with UWP/WinUI 2. Should be easy to port to WinUI 3, it's just a few attached properties and a custom style for the input fields:

InputValidation.zip

[RossCoeH]

This is excellent. Perhaps validation examples is taught in some courses, but it it the first completed example that I have seen.

I thought I was missing something basic in the framework, but now it seems that there is quite a bit of boilerplate code that I would not have found on my own.

Once done (with your Validation class, ValidationEnabledConverter, and an error template), it then becomes quite straight-forward to learn and repeat from your MainPage implementation.
Thanks for taking the time to put it all together.

[EnNico]

I can see you have selected an answer, but I still find it cumbersome to find a good solution for this, I am also using MVVM Toolkit in WinUI3 App and showing validation messages directly at the control (for example Textbox) is a common use case, still there seems to be hardly any featured approach on how to implement this task with ObservableValidator, I do not want to implement this whole logic from scratch defining dozens of styles and templates, so the easiest way was for me was to temporarily aggregate all the ValidationErrors into a Listbox but this is everything but optimal..
Did you go with the selected Answer @RossCoeH or are there any news on this?

[omikhailov]

@EnNico If the result is important, and not a specific implementation method, then there are 3rd-party libraries for validation without using the IDataErrorInfo interface and without throwing exceptions for validation errors. For example, I think mine library is quite good: https://github.com/omikhailov/handyvalidation

[RossCoeH]

The answer I selected does work, and is still the best and most complete answer I have found. I still find it surprising that such boilerplate is needed for such a common function but @ghost has answered it well. I suggest you take the time to examine how he does it. The next best solution is by XamlBrewer at https://xamlbrewer.wordpress.com/2021/06/07/data-validation-with-the-microsoft-mvvm-toolkit/
Now there is no reason not to generate your own style of validation.

[ghost1372]

InputValidation added in v1.5-exp2

[thomasjoscht]

Hey @ghost1372, are there any docs about it? Couldn‘t find anything in release notes of v1.5-exp2. Newest Release v1.5.0-preview1 does not have release notes yet.

[ghost1372]

Hey @ghost1372, are there any docs about it? Couldn‘t find anything in release notes of v1.5-exp2. Newest Release v1.5.0-preview1 does not have release notes yet.

No but there is api changes known as omd
https://omds.xaml.dev/WinAppSDKv1.4_v1.5e2.html

[legistek]

The solution posted above is admirable but it is not a substitute for a legitimate validation framework, which would need to be built into the binding mechanism. The binding mechanism, if the binding source property's parent object implements INotifyDataErrorInfo, should automatically subscribe to the appropriate notifications and then route the validation status to the control. Did Microsoft just FORGET how to write a proper UI framework sometime between 2006 and today or do they literally just not care anymore? This framework is a total disgrace.

[thomasjoscht]

What's going on with WinUI? Still no solution exists for framework integrated Input Validation from Microsoft yet! Why?

The latest version of WinUI 3 Gallery App still have the readonly menu item "Basic Input > InputValidation" in sidebar!

1. The existince of this menu item is a proof that InputValidation feature is important and necessary.
2. The fact its readonly and cannot be selected is a proof that this elementary feature does not exist!

This is ridiculous. Is WinUI 3 dead even before it lived?

[cesarchefinho]

Yes, microsoft killed winui when not maked xaml designer and not maked data input validation.

Developers today use Avalonia that has xaml designer and also has input validation.

There are no excuses to microsft drops inputvalidation from appsdk 1.6

But we have alternatives, and with avalonia we can depelop to windows, mac os, ios, android, linux, tizen and browser ! and we use visual studio code, visual studio or jet brains rider (especialy on mac) !

If microsft dont do it, others do it. Simple as it.

[ghost1372]

Designer will be available soon.(It was approved by one of the engineers)
InputValidation was added in one of the experimental builds, but it was removed in the official builds. This feature will be added soon.
We don't need Avalonia which is the mutated WPF

[thomasjoscht]

That is too funny. In the meantime, three mainstream web development frameworks have emerged and disappeared again. Just like release of two additional render modes for Blazor. All while Microsoft implements input validation.

What does „soon“ mean? Start the stopwatch at 2024-09-10T21:16:00+02:00

[dggmez]

InputValidation was added in one of the experimental builds, but it was removed in the official builds. This feature will be added soon.
We don't need Avalonia which is the mutated WPF

Meanwhile devs using Avalonia are delivering cross-platform apps today with nice validation error messages.

[lostluna1]

You can always see Microsoft launching various new things, new UI designs, new emojis, but the fact is that developers and users don't need that damn emoji I learned about WinUi from WPF. From its appearance, it roughly inherits the Fluent design style of Win11, but it cannot withstand scrutiny. When I was actually developing it, I realized that many of its features were missing (such as input validation), and these flaws and inconsistencies were the same as Win11 itself (I don't want to mention the elements of Windows Vista that can still be seen on Win11 today). Overall, Microsoft always designs things that look good at first glance, but when you start tasting it, you will find that it is just a piece of shit