How can I make the validation error message only display after "submit"?

[SuperJMN]

Showing the error message like "Password can't be empty" with a red bounding box from the very beginning feels weird.
Is there any way to only show errors after the first "submit" of the data?

Thanks.

[glennawatson]

Need more context, don't even know what platform etc

[SuperJMN]

For me it's Avalonia.

You're right. I'll elaborate a bit :)

Imagine that you have a Name field, usually handled by a TextBox.
When the view loads, this field is empty, just showing a placeholder text.

[Name]

If you add a rule requiring the field to be something, the user experience becomes a bit weird because, as soon as the view loads, the TextBox is surrounded by a red border and a validation error saying "Name cannot be empty" when the user hasn't even typed anything.

What most users expect is not this, but to receive data validation errors once they click a button. Then, the validation is triggered, and remains active from then on.

[glennawatson]

I suspect this is outside the control of rxui itself. The Avalonia team have requested to do their own ReactiveUI plugin. They want the ability to adapt to their new features easier.

Are you using the RxUI validation plugin though?

[SuperJMN]

I don't know personally. But yes, I'm using the RxUI Validation package :)

[glennawatson]

I'll have to do a bit of research for you over the weekend. Been a little while since I touched the rxui validation framework.

Most of rxui validation was maintained by a former maintainer who stepped out because of the ukraine situation.

Opened up the rxui.validation discussion area so I've transferred the issue there.

[SuperJMN]

Oh, I understand... If you want to take a look, it would be awesome. Thanks in any case!

I think the Validation package is quite useful and well designed, but needs to be discovered by more people. It's easy to love it :)

[RobertBeekman]

I've run into the same issue and I'm kind of surprised the samples do not cover this.
The way the samples work, and any other examples I can find provides poor UX in my opinion.

Ideally there would be some kind of way to clear all errors, giving you a clean state.
Then as the user inputs data they'll dirty the state, either providing valid data or produce a new error for just the property they've just affected.

Lastly in your submit method you can eagerly run a check on all of them using GetIsValid, ensuring anything the user did not touch also gets validated. If that returns false you can bail out early and show feedback on the fields they've missed.

So in summary, I believe all we need is some kind of ClearValidationErrors on the ValidationContext which clears all errors until they're rechecked.

---

Right now I have an imperfect solution where I don't add rules until the user tries to submit the form. That way they only get feedback if anything is wrong after they've clicked Submit once, but at least they don't start off with a form full of error messages.

    private void ExecuteContinue()
    {
        if (!IsDirty)
        {
            this.ValidationRule(vm => vm.Name, s => !string.IsNullOrWhiteSpace(s), "Name cannot be empty.");
            this.ValidationRule(vm => vm.Summary, s => !string.IsNullOrWhiteSpace(s), "Summary cannot be empty.");
            this.ValidationRule(vm => vm.Description, s => !string.IsNullOrWhiteSpace(s), "Description cannot be empty.");
            this.ValidationRule(vm => vm.Categories, Categories.ToObservableChangeSet().AutoRefresh(c => c.IsSelected).Filter(c => c.IsSelected).IsEmpty()
                    .CombineLatest(this.WhenAnyValue(vm => vm.IsDirty), (empty, dirty) => !dirty || !empty),
                "At least one category must be selected"
            );
            IsDirty = true;
            
            // The ValidationContext seems to update asynchronously, so stop and schedule a retry
            Dispatcher.UIThread.Post(ExecuteContinue);
            return;
        }
        
        if (!ValidationContext.GetIsValid())
            return;

        State.Name = Name;
        State.Summary = Summary;
        State.Description = Description;
    }

[glennawatson]

Yeah at the moment I guess since the other maintainer left we kept this project mostly in maintenance mode, fixes where the community demand it, otherwise not really touched. This includes the samples as you've noticed.

[RobertBeekman]

Makes sense, I appreciate the work that's been done so far, ReactiveUI has been fun to work with :)

I had a look myself to see if I could perhaps put this idea in a PR and it seems that this is not a trivial change. I do hope that someone with a more in-depth knowledge of the codebase finds some time to give this some love soon.

To add a bit more to the discussion above, I don't really see this as an Avalonia issue, though that's what I am also using. The WPF example is affected in the same way (and I assume the others too) and while it could be solved on a WPF/Avalonia level I think there's something to be said for implementing a solution here.