Username/Fullname field labels disappear when stuff is typed into the field, confuse people when they have errors

[Daniel Manrique]

In the registration form, the username and full name fields don't have proper labels; instead, the name of the field appears *inside* the field, greyed out, and disappears entirely when people type in it.

Often, people will input an invalid username (since username specs are pretty strict) and get an error describing the required format. Unfortunately, the error appears *between* the username and full name fields, and because at this point both fields have content, the labels are not visible; as a result, people correct the *wrong* field and get frustrated (read: come complaining in the SSO support e-mail address) about being unable to fix their usernames even after multiple attempts (because at this point they're changing the full name).

The provided screenshots show a pristine form, and a form with both fields filled out, and the error between them, to illustrate the problems.

What we could do:

- Add proper labels to each field.
- See if there's a way to more closely visually tie the error to the field it refers to.
- Something else? maybe js or "pattern" validation that could trigger at field blur time and alert right then/there with a nice arrow pointing to the field? (https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145) - not sure if the username format can be described by a single regex but this could fend off like 95% of possible problems before hitting Django form validation.

[Matthew Paul Thomas (mpt)]

The merged change makes the error less ambiguous by repeating the input. Unfortunately that makes an already-wordy error message even longer. And it doesn’t help if someone, quite reasonably, enters the same text in the full-name and user-name fields.

Ambiguous error states are just one of the many problems with placing field labels inside fields. (Others include unfilled fields being less noticeable, looking disabled when you do notice them, and/or looking as if you need to delete the label before entering your own text.) So I’d support your first suggestion of giving proper labels to each field. Your second suggestion would help too, specifically placing every error message below the relevant field rather than above it.

[Matias Bordese (matiasb)]

FTR, leaving the related MP description details here:

"FWIW, as can be seen in the screenshots attached to the bug, besides the error message the field in error is already highlighted in red. This adds extra information in the message to help identify the field.
Changing the UX (to include labels or sth else) should probably go through the web team, who defined the current login/register form."

It's true the username field was added later, and the placeholder approach wasn't rethought then. I can push more updates if we agree on a plan (but didn't want to alter too much a UI which was previously agreed in a first attempt). Moving the error message below the field should be easy enough to give it a try.