Improve form errors

[joseivanlopez]

We have forms informing about errors when something is wrong after submitting the form. Generally, the errors are shown at the top of the form. The problem is when you click on submit again and you get the error again. Visually nothing changes and it seems the submit button is doing nothing.

[Anandpandey0]

I can do this. Please assign it to me.

[joseivanlopez]

Great! Please, simply go ahead by creating a PR. Thanks!

[balsa-asanovic]

Hey, I'd be interested in working on this.

However, could you provide me with some additional details/screenshots about this issue?

Thanks

[joseivanlopez]

For example, if you go to Storage -> iSCSI. Try to discover targets.

After submiting, you get an error message at top (if it fails):

And note that after submitting, the form does not scroll up.

So it is difficult to realize whether it failed again. So, maybe we need to scroll-up and somehow highlight the error again. But that is only an idea.

The goal is to improve UX but making more evident that the form failed again. Please, discuss any proposal you have in mind before going ahead with the implementation.

Thanks!

[balsa-asanovic]

Hey @joseivanlopez ,

Thanks for the detailed explanation, that helped a lot.

To me the scroll up seems like a reasonable solution.

I've introduced these changes in PR #699, so you can check it out.

Also, I wasn't sure, but maybe a good idea would be to make the alert invisible again on any change of the input fields in the form.
What do you think about this?

Because, when the form has no scrollbar (the full component can fit on the screen) it seems as if the error warning is just stuck. If it disappears on any data change and then reappears on submit (if the issue is still present), seems like a possibly better experience for the user.

[imobachgs]

To be honest, I am not sure if auto-scrolling is the best solution. I think we should think better about form designs in general. But for now, it solves the original problem, so I am happy with it. :-)

About making the message invisible, I do not have a strong opinion.