What is better: disable next button if the form is not filled or enable it and outline the inputs?
Analeea last edited by
Hei, was thinking: what is better from user perspective:
- The form which if not filled with all mandatory fields the "next" button is disabled
- 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).
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.