Back

@joelanman Ive always disabled the submit button until the form is valid, and provided feedback within the form itself as to what is needed (usually on blur). Is that not the right way?

@robert I think there's always the possibility someone might not understand why the button is disabled - for example they miss a field for whatever reason. Also inline validation is so hard to get right for everyone (people who use screen readers or magnifiers for example) and you have to write server side validation anyway, and then you have to keep both sets of validation rules in sync

@joelanman I could go on here - yeah you need the same rules on the server and client but their purpose is different. On the server you need certainty that your business rules are followed and your database is consistent. On the client you need accessibility and intuitiveness. You make different tradeoffs in both circumstances.

Good UX design is hard to get right, that doesn’t mean you shouldn’t bother.

@joelanman I feel like I’m misunderstanding you. Are you saying we shouldn’t bother with inline validation messages? That waiting for users to submit an invalid form to then return some kind of modal with a to-do list is better? If so, I disagree:
- requiring users to remember instructions is bad design
- feedback should be specific to its associated field, not the entire form
- on field blur is the best time to give feedback because then the user’s focus is already there.

@robert Disabled buttons have proven to be problematic. The basic idea is: where you had a disabled button, leave the regular button and instead of triggering the action, warn the user.
The particular pattern you're using doesn't matter. So why not keeping your pattern and replacing the disabled button with an action informing the user of why they can't submit?

@martinm That makes sense, I like that advice. Should I still grey it out? Give an indication that it’s not ready yet?

@robert greying out is problematic because of contrast as mentioned above. It also is a convention for disabled buttons so visual users would probably assume they can’t click. A info message under the button would work better in my opinion…

@robert @robert the core idea is to have the button do something instead of nothing. then you can build your pattern from there. Giving feedback earlier is a nice improvement, which is what the info text would do. Changing the button text may be another possibility in some cases (although I can’t see it working in the context of forms)

@martinm by “greyed out” I either mean a dark grey or a darkened and desaturated theme color with white text, and then when the form is valid I transition it to whatever the primary theme color is. Good contrast in both cases.

I think it’s a good idea to validate all fields on click and show any messages that were hidden up to that point. I’ll be making that change in the future, thanks!