Disabled submit button on form vs allow submit then show errors?

Question

We have a few different forms as part of a web-based medical application. These forms have quite a few fields - 10-20 depending on the form. Each has at least 5 or so required fields. We currently disable the save button until those required fields are all completed.

We've been debating whether it's a better user experience to make the submit button enabled by default and then display an error message (and highlight missing required fields) if the submit button is clicked before all required fields are filled out.

Any research or sound opinions on what might be better? We're leaning towards the latter approach since our forms are pretty long -- allowing them to submit then find errors might be more efficient than the cognitive load of searching through the form to see why the button isn't enabled.

Answer 1

If the button is merely disabled, users will

1. Think the application is broken,
2. Not immediately realize which fields are unfilled and
3. Not realize the fields are unfilled until the very end, which is annoying

So, I'd suggest telling your colleagues exactly what you told us, which is that

allowing them to submit then find errors might be more efficient than the cognitive load of searching through the form to see why the button isn't enabled.

Answer 2

If the submit button is disabled, you definitely have to tell the user why this is so.

So why not display a short message telling the cause for the disabled button when this is the case?

This short message could be shown under the form - maybe in red or highlighted in another way. And then this approach provides the better user experience in my opinion.

Probably you have to implement the other approach anyway, for users without javascript or so ...

Answer 3

The added value in leaving the "Submit" button enabled is that the user doesn't care what's required. i click submit and i want to be done with it.

We go out of our way to indicate when something is not yet valid:

They can still click OK, but if there's a problem, we quickly and easily direct their attention to the invalid item. We even put keyboard focus there, so they can get on with important stuff:

Through my own (and i've observed other users) use of the software, i don't care about what's required. And i've learned that the software will only let me save if everything's done. And the software will even focus the items i have to care about.

So my procedure in the software has become:

1. F5
2. if screen still open, then type in what it wants
3. goto 1

Answer 4

The best practice on form submit is to disable the submit button (and indicate some kind of busy state) to avoid duplicate submission. I wouldn't do anything which might confuse that issue, which I think disabling the button for any other reason would.

I see where you are coming from, but really, if you are disabling the button for a reason, then the user has to work out that reason. The disabled button is an indirect indicator of requirements. Far better to indicate those requirements directly and avoid the extra step - it will reduce the number of completed forms.

You might also want to consider whether to validate the fields inline (with validation after completing the field), so that the issue is avoided somewhat. It also helps when the forms are long and the submit has a potential to highlight a lot of errors. You're already presumably doing some kind of validation in order to detect whether to enable the submit button, so it cant be a great leap to doing inline validation? Keep the success indicator prominent, permanent and outside the form field.

Read more about the subject of inline validation on the A List Apart site, there's some useful info there including consideration of whether inline validation is appropriate for a given form. For example, it is more useful on more difficult questions, but the inconsistency of having it on some but not all questions is debatable.

(Consider A/B testing to check these changes improve your results)

Answer 5

The problems (IMO) with disabling the submit button - and, I presume, using javascript-like to validate and display messages - are twofold. Firstly, the user needs to rescan the entire page to identify what is invalid, and realise that they must have put something wrong. This is a high cognitive load, and/or some quite difficult displaying of appropriate messages.

However, secondly, more complex validation ( i.e. across multiple fields ), and if you do as-you-type validation, the user will see error messages flashing in and out, or messages showing on fields they are not currently entering.

I would prefer to see a button that enables you to "progress" - so submit the changes, validate your input, and move on. That feels like what I want to do. Disabling a button indicates that this is not a viable action, that is, that submitting the form ( validating and moving on ) is not something I should expect to do. Sometimes, when clearly indicated, disabling the button for REQUIRED input is OK, but not for INVALID input.

All, IMHO, of course!!!

Answer 6

1. Highlight incomplete fields. Use an innocuous method, e.g. a light gray background, so you are not yelling at the user for something they are about to do.
2. If users enter illegal data, highlight that in a different way (red tint background?) to indicate that something is really wrong there.
3. Disable the submit button until the form is valid, but have a summary of what needs to happen for it to be valid right on or near the button. ("Name and three other fields are blank", or something more clever than that.)

... Note I said "valid", not "complete". There's a nice section in About Face 3 on incomplete forms. The advice there is that if you can make use of the form in an incomplete state, do so, and find another way to acquire the rest of the information. This only works if you have people periodically reviewing the forms and adding required information, however--which may not match your users' context of use.