Clarify reason for invalid tag input

[calculuschild]

Tags can become invalid due to a number of reasons: disallowed characters, exceeded character limit, duplicate of another tag, etc.

Currently, the tag simply turns red when this occurs. It would be handy to have a small popup label to indicate the specific issue that is causing an invalid tag.

Along with this, the URL input for thumbnails should have a similar popup for too-long URLs. See #2356

[Gazook89]

I am tinkering with an approach that would utilize a single "error" area in the meta panel which would display thumbnail url errors and tagging errors (and any other areas). 80% of the reason is because I don't personally want to tackle positioning errors around tags. But also I think it will appear less cluttered if there is an expected and consistent space for errors in that small panel.

This is a thumbnail too long error (my length rule is currently just set to 5 characters for testing):

Alternative:

[calculuschild]

I am tinkering with an approach that would utilize a single "error" area

I like it. I think your alternative approach (overlapping) might be best. Then we don't leave a wasted empty space at the top or have to worry about the UI shifting around to accommodate error messages of different lengths.

[Gazook89]

If someone pastes an url that is too long into the box, do we want the text to still be entered but not used?

Or prevent it from being in the input box entirely? (this is my preference, because i already have it accomplished).

alternative approach (overlapping might be best.

noted

[calculuschild]

I'd allow it to be pasted in so they can see a glimpse of what they have copied. I can imagine users complaining "it gives me an error that the URL is too long, but the text box is empty and it won't let me even try!"

This also mimics the behavior of the tags. When an invalid input is entered the box just turns red but doesn't block the user from interacting with the page.

[ericscheid]

In chrome, pasting a long url into an <input maxlength="125"> will result in the too-long-url being truncated .. and since the permissable length is likely much longer than the input field would display this fact of truncation will not be obvious.

Same thing with Safari and Firefox. All three on MacOS.