When name is missing from "Add new server" dialog, only the name field should be highlighted and "Add" button shouldn't be disabled

[jasonblais]

I confirm (by marking "x" in the [ ] below):

• This is not a troubleshooting question. Troubleshooting questions go here: http://www.mattermost.org/troubleshoot/.
• This doesn't reproduce on web browsers (such as in Chrome). If it does, issue reports go to the Mattermost Server repository.
• I have read contributing guidelines.

---

Summary
When name is missing from "Add new server" dialog, only the name field should be highlighted and "Add" button shouldn't be disabled

Steps to reproduce

1. Go to File > Settings
2. Press "Add New Server"
3. Press the "Add" button

Expected behavior
"Name is required." error message with the name field highlighted

Observed behavior
"Name is required." error message with the name and URL fields highlighted, and the "Add" button disabled

[jasonblais]

@jnugh a small bug I missed when reviewing #415. Not sure if that's something you'd have time to help with?

[jnugh]

Actually the current behavior was intentional - When you click the Add button without filling any fields there are actually 2 errors, these fields are marked red. I don't think that it's a good idea to validate the form only until an error has been found.
I don't show the error next to the fields but in the bottom left corner where only one error message fits.
The Add button is disabled until you resolve the errors.

[jasonblais]

@jnugh This seems to be inconsistent with Mattermost server error messages, hence making the experience less obvious (or familiar) to the end user.

[kethinov]

I can't reproduce this one in the latest master. I believe it may have been fixed at some point.

[jasonblais]

Hey @kethinov, thanks for looking into this! It does seem to reproduce for me

(The "Add" button is disabled and the "URL" field is also highlighted red)

[kethinov]

Ah my apologies, you're right. When I read the issue originally, I thought you meant that some time in the past both fields weren't being highlighted and that they should be, but I misread you.

[jasonblais]

No problem! Are you interested looking into fixing it?

[yuya-oc]

Accidentally closed by pushing. The original problem still exists.

[kethinov]

The reason that #779 was marked as closing this is I argued in #779 that it is a better UX to continue to highlight them all as it currently does, but to clarify the error messages to remove the confusion instead of selectively highlighting.

As I understand it, there is a school of thought in the UX community that once you submit a form, all fields that are not filled out correctly should be highlighted, even the ones you haven't tried to fill out yet. The idea is it draws your attention to everything that needs to be addressed before the form can be submitted.

I'm sure there are good arguments to support both positions, but the react-bootstrap people appear to have taken the position that highlighting them all is the way to go, and have built their API accordingly. To selectively highlight instead, you would probably have to drop that dependency.

[jasonblais]

Thanks @yuya-oc and @kethinov - we can close this for now per the reply above, especially now that the text matches the highlighted fields that are missing.