Dialog form and validation patterns

Alright, another component to dissect- form in dialog.

So all is good if the form in the dialog doesn't require vertical scroll - everything is in view - easy to scan and recover from errors if those occur. But the second the vertical scroll comes in play things get complicated. In the design above(right) we have an element with CTAs ('Cancel'/'Add new payment') with fixed position...

We could always drop the fixed position for CTAs. Example to the left has a 'cut-off' indication there's more content below fold, but we should not assume that's going to be the case in all scenarios. If there's no 'cut-off' at the bottom the only thing indicating vertical scroll is the scroll bar to the right and that element often has a very light contrast ratio. Potentially hesitation moment or even a blocker - I filled out all the (visible) fields but there's no action to continue with...

One could say giving the primary CTA disabled state would be a good indication that the form is not ready for submission, but we would encounter another issue- disabled buttons don't give any feedback, they give no clues on what's missing...

Potentially optimal solution is the one above:

• CTAs still have fixed position

• Primary CTAs is (visually) active and on click/tap triggers the validation

• If there's one validation failure the focus is being moved to the item with the error and the validation treatment (error message) is applied

• If there are 2 or more validation failures the focus is moved to the error summary in top section, which includes the list of items user needs to review. Each error is hyperlinked and on click/tap moves the focus to corresponding element.

• If validation returns no errors we stay on the happy path and submit the form 🚀

Is this approach the best option for all cases? Probably not. You could argue your users are tech-savvy and this would be an overkill - and that's fine (assuming it's actually the case). You could also argue that this is just overthinking things, and you might be right, but overthinking things, within reason, is part of the job ;)

Feel free to share thoughts!

------


Feedback, especially negative, always welcome!