4

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?

4
  • 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, 2015 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, 2015 at 21:33
  • yes, I was answering in general and addressed the "password" case
    – Devin
    Jun 1, 2015 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, 2016 at 19:15

2 Answers 2

1

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).

1
  • 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, 2015 at 20:31
0

From https://material.io/archive/guidelines/patterns/errors.html#errors-user-input-errors in the sub-section "Errors detected upon form submission":

Reload the form with consolidated error messages and scroll position at the top. Error messages for individual fields may be resolved as the user works through the form.

Your Answer

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