Design/UX #11557

"Site names can only contain lowercase letters (a-z) and numbers" warning on Create Site page

Added by Tom Harbison 7 days ago. Updated 5 days ago.

Priority name:
Category name:
Target version:
Start date:
Due date:
% Done:


Estimated time:


One the Create a Site page, is there a way to flag a site domain that fails to meet requirements before the user clicks the "Create Site" button? I ask because Gina and I are sitting with an instructor who is launching a site, and we didn't catch his mistake of using capital letters in the Site Domain field until after he had spent a few minutes filling out the rest of the page. Perhaps something akin to the warning that says in red letters "This blog name is over 15 characters" could display if problematic characters are detected? Or maybe an additional note that goes beyond that permanently above the text box ("Note: The domain cannot be changed once created," saying that "Site names can only contain lowercase letters (a-z) and numbers." Otherwise, I don't think the message that "Site names can only contain lowercase letters (a-z) and numbers" gets displayed to the user until attempting to submit and then the page reloads losing some of what they've filled out.

Peek 2019-06-13 13-31.gif (1.53 MB) Peek 2019-06-13 13-31.gif Boone Gorges, 2019-06-13 02:37 PM
Peek 2019-06-13 13-30.gif (2.21 MB) Peek 2019-06-13 13-30.gif Boone Gorges, 2019-06-13 02:37 PM


#1 Updated by Boone Gorges 5 days ago

Thanks, Tom. This is a good idea.

As you note, there's some existing error messages here for too-long domain names. But these messages are not applied in a way that's visually consistent, especially when comparing standalone site creation (/sites/create) and Group+Site. So I've done some more extensive work to unify the treatment, and I've added the character-validity check.

Sonja, it would be great to get your feedback on this. I tried for a visual treatment that was simple enough that it could be consistent between /sites/create and 'Add Site'. There are three parts:
1. When there's an error, show a red outline on the input
2. When there's an error, show the notice just under the input
3. When there's an error that will block creation (as opposed to a "suggestion"), disable the form and show a notice by the submit button

See attached gifs. We don't really have a set standard for this kind of inline validation on the Commons, but I don't want to go overboard with inventing one at this point, so I've aimed for simplicity :)

Also available in: Atom PDF