What is better: disable next button if the form is not filled or enable it and outline the inputs?

Question

Hei, was thinking: what is better from user perspective:

1. The form which if not filled with all mandatory fields the "next" button is disabled

or

2. The form with "next" button enabled, but after clicking it not filled inputs will be red?

Background of the problem: user is filling the form (has "next" button disabled") and aborts filling, after some time he comes back and sees the form in the list with the status "needs more information" and clicks on it, then in my opinion it's better to show him red inputs (so he will find easy all mandatory inputs he didn't fill) and disabled "next" button. But it's kinda different logic, why we are not showing the red inputs while filling the first time (now first time fill is with only disabled "next" button, red fields can't be displayed because user don't have click to action).

Answer 1

It depends on the complexity of the form.

If the connection between the disabled button and the not valid input fields is clear, go for it. Mostly this is the case in small forms with only a few fields an preferably in the same viewport with the submit button.

But this might not always be the case. In longer forms or forms with complex rules the reason for the inactive button might not be clear. In this case I would prefer a clickable button that shows me the not valid fields.

But! as Arthur mentioned the first thing to do is, to make it clear to the user which fields are mandatory or what input is valid. You could also consider if you rather would like to brake your form down into smaller parts, which makes forms less frustrating to users. A very long form can be overwhelming.

Answer 2

Once you have the clarity of letting the user know which are mandatory and which optional, enhancing the wrong filled or empty mandatory fields you have to decide between the two options. As mentioned above the main reason to take one or the other approach is determined by the length and complexity of the form. For small and easy forms it make sense to disable the button until the form is well filled. For larger and complex forms it would be better to show a warning when the user presses the next/submit button with an incomplete or incorrect filled fields. But, said that, I also woul research to better understand the target user's abilities and behavior because for me the disabled button plus the warning would be the best option. The same as for the policy, code of conduct license buttons. I would disabled them within the next at least 5 minutes because nobody read those contents (me included) and everybody accept just to jump to the next step.

Answer 3

Start by making it absolutely clear which fields are mandatory. The border on the fields might be blue (before turning red), they can be on a different section, their titles can be bolded... See what fits the page best, but in my experience, just the "*" mark is too small to be noticed.

The fields could also benefit from validation on "out of focus". So if a user has it on focus and then leaves it empty or with invalid info, he/she gets the red border, warning or whatever you're gonna use to point it out.

I don't believe there is a clear cut answer on what is always best regarding form confirmation buttons and their relationship with mandatory fields.

My opinion is that pushing a button expecting something to happen and then getting a message, even a nice one, saying "WRONG!" is a bit frustrating. On the other hand, trying to push a button and then noticing the button is there, it says "Do thing" but can't be pushed to do said thing is also not the best.

Maybe you can place a message like "Please fill all required fields to continue" where the disabled button would be. This message then changes to show the confirmation button when all required fields are filled appropriately (ideally with a nice smooth transition).

Answer 4

Go for enabled button with error / empty field highlights after submitting.

If a user skipped a mandatory field, clicking the submit button will highlight the empty / erroneous field. With a disabled button the user is left wondering what they did wrong.

I personally prefer orange highlights over red as its a little less "you're doing it wrong!".