"Title *required - at least 15 characters" error hard to see

Question

I went to create a new question, typed my (short) title, and long question body, I scrolled down and clicked "Ask Your Question" (actually this happened while editing an old question, which had a title of less than 15 characters, but that's a different issue).

The button is greyed out (like usual when you click), and.. nothing happens.

I reloaded the page and tried resubmitting. Same problem again.

Eventually I noticed, in tiny red writing next to the "Title" input heading, an error:

Title *required - at least 15 characters

..so I entered a longer heading and all worked correctly.

Kind of a usability problem - the error message doesn't appear until you click submit, which you have to scroll down (at least at a screen resolution of 1440x900, which is common for laptops)

Here is an screenshot more clearly demonstrating the issue:

screenshot demonstrating the "invisible" error http://img260.imageshack.us/img260/7623/shorttitleerrorexample.png

---

Two possible solutions:

• Scroll the page to the top when you click submit. Might be a bit jarring, as when the page changes, you'd expect to be viewing your newly submitted question..
• Display a similar message next to the submit button, such as "There were errors with your question: title must be 15 characters or longer", or simply "There was an error with your question, please double-check each input"

Answer 1

workaround: when doing the AJAX callback to look up related titles we now return

That title is too short to be useful. Can you add some more detail?

instead of actually searching on too-short titles.

This means the top part containing the validation error is more likely to be visible, since it won't be "pushed down" by the related questions.

(aside: constructing a valid 15 character title, even for testing, is pretty darn hard.)

edit: We moved most of the post validation to the server, which helps reduce any client JavaScript quirks that would prevent submission. This also means submission errors can be simplified and placed in the same area on the form:

http://img689.imageshack.us/img689/6915/stackoverflowserverside.png

Answer 2

You could also display the error message after leaving the title text box without even clicking the submit button. But it is more work to implement.

Or you display one of these red error messages boxes after hitting submit and take care that they are always displayed within the visible area.