Best Practice Validation for Long Form with Disabled Submit Button

Question

Hi and thanks in advance for your help. I'm working on a form that was built using Angular 2. By default, the submit button is disabled until all required fields are complete. The form is long and contains text boxes at the top that use inline validation - no problem there.

There are a series of checkboxes at the bottom without inline validation, only a red asterisk by each. Inline validation on these checkboxes would be awkward because the only way I can figure out to trigger them would be to put focus on the next checkbox. There is no control after the last checkbox so nothing to trigger inline validation.

The submit button is on the top of the form and it is disabled by default so that submitting the form isn't possible without all required fields set. so there is a good chance that users will not click the button to fire validations.

Should I change the form so that the submit button is active upon page load so that there is some way to fire validation? Any other ideas would be greatly appreciated as well. Thanks again.

Answer 1

Keeping the Submit button disabled makes the user think:

Something is wrong

But it doesn't really tell them what. Also, they won't be able to figure out if there's an issue with their entry, or with the system, or with the internet.

It's too vague

Validation should always be done on action. Like:

• When the user moves to the next input field
• When the user hits the Submit button

This helps the user understand what went wrong and it also feels intuitive.