Avoid Premature Validation

[bjarnef]

Which Umbraco version are you using?

16.0.0

Bug summary

I think it is best to not validate on blur initially, but first after form has been submitted. After submitted it can validate on blur.

In old back office using Angular the form itself had $dirty and $touched properties, which I think was used to tell if the form was submitted by used.

Personally I find it annoying, that it show validation errors, when I tab through properties.

chrome_gK83rwTClE.mp4

Specifics

No response

Steps to reproduce

Focus a property which is mandatory and notice it show error even though overlay or view hasn't been submitted/saved.

Expected result / actual result

No response

---

This item has been added to our backlog AB#56972

[github-actions]

Hi there @bjarnef!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[nielslyngsoe]

Hi @bjarnef

I agree with your perspective that this can become annoying when tabbing through properties. But I do still think we need to validate on blur. — Otherwise, the feedback can come too late.

We need to bring the feedback to the user right after they enter their value. In some cases, the requirements are just that the field is mandatory, and we need to let the user know that when leaving the field.

If there are other rules, like length requirements, then the user also needs to know right after they leave the field, cause at that point they indicated they were happy with the value. At this time they are mentally aware about that field and ready to adjust to follow the rules. The alternative, of bringing all the feedback at the time of submission, can be super annoying. Maybe the page has more than 20 fields, or maybe the issues originate on other tabs, then the user has to navigate back to correct them. Mentally going back to things they filled out minutes ago.

If a field is not mandatory, then it should be okay to leave it empty and be fine for you to tab through.

So it comes down to whether you should be able to focus through fields without getting feedback. So, ideas regarding not bringing feedback if the user tabbed through fast, or if the value was not changed, is maybe the solution you are looking for?

I did notice that your Call to action link did not complain when you blurred, so that is clearly an issue from my perspective.

[bjarnef]

In my opinion it is best practise the shown validation, when form has been submitted and is "dirty", after that validation of fields will be valid/invalid on blur.

Otherwise it will clutter the UI unneccesary while user is still modifying data.

Normally length validation of fields are shown as one type into the field.

There are some great UX advice in this article:
https://medium.com/@olamishina/building-ux-for-error-validation-strategy-36142991017a

Eg.

• Validate empty fields (required) only on submit to avoid interrupting the user’s flow.

And some other UX guidelines here:
https://www.nngroup.com/articles/errors-forms-design-guidelines/

which mention inline validation, but also avoiding showing errors before user input is complete, e.g. in an email field.

There are surprisingly many flavours of live validation. Over the years, we’ve learned to avoid premature validation — live validation that happens when a user just focuses on an empty input field. In that case, we would display errors way too early, before users even have a chance to type anything. This isn’t helpful, and it is frustrating.

https://www.smashingmagazine.com/2022/09/inline-validation-web-forms-ux/#the-many-faces-of-live-validation

[nielslyngsoe]

Hi @bjarnef, good point on "Normally length validation of fields are shown as one type into the field.", That should be possible to adjust for the specific Components and their length validations. So they report immediately and as the value changes.

And I think "Validate empty fields (required) only on submit to avoid interrupting the user’s flow." would be interesting to investigate — but a bit tricky as the system works currently.

Because we need inputs/Property-Editors to report to the Validation Context when they exist, once the user navigates away we no longer have the Property Editor to do the judgment. So it means that we need to append some information to the Validation Messages that enables the Validation System to filter those messages out(ignore) them until the form has been submitted once.

But despite those details then when I read these articles, it seems we are doing the right thing in general, considering the case of Content-Types with many Fields and multiple Tabs.

[bjarnef]

@nielslyngsoe does each field has a state e.g. pristine, touched, dirty known from Angular and Vue.

In some headless projects with have used PrimeVue in frontend:
https://primevue.org/forms

But if the validation kick in after fields have been touched/modified and not only a focus, I think it would make a big difference 😇

[bjarnef]

It would be great if we can do something about this, so it doesn't shows validation error each time a item is added in color picker or checkbox/radiobutton/dropdown lists.

[bjarnef]

Perhaps also consider this PR umbraco/Umbraco.UI#1156 so the validation text can align at left below color input, but not below drag handle :)