DavidAJohn / FotoStorio

Blazor WebAssembly application for a fictional photography store, with Stripe Elements payment integration and styling with Tailwind CSS.
MIT License
5 stars 1 forks source link

Add Fluent Validation? #13

Closed DavidAJohn closed 3 years ago

DavidAJohn commented 3 years ago

While I was working on the checkout page (OrderSummary.razor) I saw how "immature" the Blazor EditForm is.

It's fine for validating primitive types, especially if you can create a model class to validate against, but it has limitations and there are important things missing:

1) async validation 2) the inability to get the form's state without running form.Validate() (which then shows validation messages to the user), which leads to... 3) you can't disable the submit button while the form is invalid (without a horrible keyup hack), because even if you listen for changes, it requires the user to click or tab out of the last element for validation state to update.

Compared to Angular's reactive forms, that is horrible.

Anyway, after that tangent, I think using Fluent Validation in certain places would improve the user experience. Probably on the checkout page where we validate the address and the registration page (especially to enforce password strength rules - as much as you can on the client).

There is also Blazored FluentValidation to help with this. Thanks Chris!

DavidAJohn commented 3 years ago

I've added Fluent Validation to the registration page (Client/Pages/Auth/Register.razor) in a commit here: 437f86fbfc972c16f17e349c3299f91e35662322.

I was originally planning to use it on the checkout page as well to validate the delivery address, but I'm not sure there's much to gain by implementing it on that page when we're only checking that a series of textboxes containing strings aren't empty.

So, for now, this is done.

I've left an address validator class in the Shared library as well, in case I change my mind at some point.