How to handle user input error handling on signup form [duplicate]

Question

I'm designing a signup form and got stuck in a ux discussion on how to handle user input error handling. Which would you prefer of the following two scenarios? Or is there a third, better option?

Method 1: The submit button is always enabled. When clicking the submit button the form is either posted (if all fields are correct) or the wrong fields are marked for the user to correct.

Method 2: The submit button is disabled from start. When the user interacts with one of the form fields the rest of the fields are marked (with an error or are just highlighted) in order to emphasize that those fields also have to be filled out. When all fields are filled out correctly the submit button is enabled.

Answer 1

The sooner you let someone know they have an error, the better. Why wait for submit? If the user types an email address that isn't properly structured, mark it invalid as soon as they leave the field. If they activate a required field and then leave it blank, show the "required field" message next to it.

You can get even more active if you chose. If usernames must be unique, check the availability of a typed username after the user finishes typing. It's much quicker feedback than letting them submit only to tell them the name is taken.

I wouldn't disable the submit button because that can make the form look broken, or at least slow down how soon the users gets feedback. Let them click it and you can deliver the feedback messages that much faster.

Answer 2

The best design solution would depend on the typical user behaviour for your target group, but here are some things to think about:

Method 1: enabling a action when you know that there are things preventing it from being executed successfully is not good for meeting user expectations. However, generally most sign up forms have the submit button enabled because it needs to be inviting for people to want to sign up.

Method 2: disabling the submit means that the user has to figure out exactly what the problem is in order to enable the action, which can be frustrating.

Without any idea of the information required for sign up, I would suggest that if you made the form very short and simple, then either method is actually fine as long as you address the potential problems.

Answer 3

May I suggest this.

First: allow the user to be prompted immediately if they have a wrong format input.

Second: Provide suggestion in cases like username rather than a failure message.

Third: Break the form up into multiple steps (this will enable the user to have a sense of completion and the user will not need to worry if there's input have mistakes once they past this step.)

Forth: Enabled the next button only if the form are completed and error free.

Simon