3

I've been trying to set a standard for my team. Right now, I have it as when there is a system error there would be a toast

enter image description here

And when there is a user error, the field becomes red and there is an error message below the field.

enter image description here

My main question is, what happens when the user ignores the user input errors and they press save. My suggestion was having a message at the top of the page that says, please correct the invalid fields. Is this the right direction or is there another way to handle this?

3

There are many ways, and it can get confusing. (Philosophical discussion here first, my answers/opinion/perspective nearer to the bottom)

If you have a long form, and the user gets to the bottom, should they be allowed to save despite inline validation errors, or should the button be disabled? If disabled, how do you let them know WHY they can't save, if the invalid field is off-screen? Do you give them a tooltip message on the button?

If they ARE allowed to save, how do you present the message that there's more they need to do? Is the "toast" option enough? What happens if the field is off screen? Present a message when they click Submit? Do you scroll them up to the first invalid field and make sure all invalid fields are highlighted (hint: probably)?

If you have many required fields, when do you show them as in "invalid" state? Before they have been touched, as soon as the user hits the page (pro tip: NO, this is not a good idea, slapping the user in the face immediately with a page that shows error states)? Only once they've focused and blurred on a particular field? After they hit Submit (which only applies if you LET them submit with invalid fields)? Or do you keep them from submitting until all required fields are valid... which brings you back to the first question.

A brain twister, no?

Of course, the answer is "it depends." :-)

I'd first consider the length of your form. If it is a short form that they can see all of on screen along with the "Submit" button, you MIGHT be safe in disabling the submit button. A courtesy tooltip on the Submit button saying something like "You can't submit until all required fields have been properly completed" would be nice, but there are many considerations around that as well. Bear in mind that there are plenty of folks who say you should NEVER disable a control, and in a responsive paradigm I can see their perspective... but I still hold there's a place in the world for "disabled until compliant."

For longer forms, particularly ones with many required fields, I'd recommend clearly labeling any required fields, but not highlighting them as "invalid" right off the bat (obviously). If the user focuses on a required field and then moves to another one, highlight the required field as invalid ("Hey chumley, you were here but you forgot to fill it out - required, remember?" - actual messaging may vary). Simple invalid entries are easier: for non-required fields that need validation, once the user enters something and leaves the field, put it in error state until they correct the entry. I'd recommend not putting it into error state as they type; that's just kind of rude.

Meanwhile, leave the Submit button active at all times, but if the user clicks it before all fields are complete and valid, highlight ALL the non-compliant fields, and scroll the user directly to the first one so they know exactly what they need to do. As they work their way back down to the Submit button, they will see exactly what they need to do before they can submit.

  • 1
    Thank you! These are great suggestions. Our forms are large so the latter would work swimmingly! – Erica Price Sep 14 '16 at 19:12

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.