blog.thms.uk

Stop disabling form submit buttons

One of the really frustrating things on the web, is when a form submit button is disabled on page load. I assume this is usually done with good intentions, to stop the user from submitting a partially completed form, but the UX here is almost always terrible.

One place where this happens particularly frequently is login forms. I use a password manager (as everyone should!) and more often than not, the password manager's auto fill does not trigger the necessary events to enable the form button. As a result I need to go into the user name or password field, type a character, delete that character, and only then can I submit the form and log in.

That's frustrating!

It gets even worse if you have a form with multiple fields, and it isn't clear which field is actually invalid / needs filling to enable the form submit button.

What are the alternatives?

Instead of disabling form buttons on load, and only enabling them, when your form is completely filled and valid, leave the button enabled. Then show validation errors if the submit button is pressed before all required fields are filled.

You can either do this client-side, or validate the form submission on your server. Ideally I'd suggest you want to do a combination of both: Do some basic validation client-side (e.g. ensuring that all required fields are filled in). This gives feedback to your user quickly. But also do the full validation server-side. This is absolutely required, because some users may find ways to circumvent your client-side logic, so you must never rely on client-side validation (or disabled form buttons).

This also gives your users more hints: If a form button is simply disabled, the user doesn't know which form field is invalid. Showing explicit error messages when the user attempts to submit an invalid form gives the user valuable feedback as to which field they need to correct.

So, in summary: stop disabling form buttons!