The material design specifications define the placement and look of error messages related to invalid input on forms as shown below.

enter image description here

I don't see a specification for error messages that may occur after the form is submitted. example: a login form could generate an "invalid username or password error." Any ideas on where such an error message should be placed and what it should look like to adhere to the spec?

  • 1
    if it's after the from submitted, you're not using AJAX, or you're using it in a different way. If you have an error in your form while using AJAX, you'll get an inline error message, unless you mean a password (which you mention). In this case, you should use a dialog: "Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a process. (...) they are interruptive in nature. Their sudden appearance forces users to stop their current task and refocus on the dialog content." google.com/design/spec/components/dialogs.html – Devin Jun 1 '15 at 21:13
  • @Devin - My ajax request fires when the submit button is clicked on the login form. The server can potentially respond with a "invalid username or password" message at that point. I do agree that using a dialog seems to be the way to go. – user66763 Jun 1 '15 at 21:33
  • yes, I was answering in general and addressed the "password" case – Devin Jun 1 '15 at 21:38
  • @Devin, a dialog for "wrong password" would be unnecessarily intrusive. I can't think of a (big) web application that does that. – bruno Jan 5 '16 at 19:15

Depending on the severity of the error, take a look at the material guidelines for "Simple Dialogs" (for more severe errors), or "Snackbars and Toasts" (for less critical messages).

  • This means that the server side code will now have to return a "severity" flag in addition to an error message so the front end can toggle between a toast or a dialog. Interesting idea - I think I will probably end up doing this unless someone comes along with a better idea. – user66763 Jun 1 '15 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy