Designing the State of Our Application

A typical pattern in modern web applications is that when there is a form with multiple input fields, one input field might rely on another input field. For example, a password field may affect a password confirmation field by requiring that the two fields match with each other. While this validation is being performed, there is another validation happening which will prevent the user from clicking the submit button if there are errors. In addition, there will be other fields that will affect each other. For example, a password field may require the password to be different from the username entered. For the purpose of our example, we are going to build a form where someone can sign up for an account. They will need to enter:

• A username
• A password
• A password confirmation
• An email address

In terms of validations, we will want to make sure that:

• The username is filled out.
• The password is filled out.
• The password matches the confirmation.
• The email address is at least in the format of (someusername)@(somedomain.com).
• The submit button is grayed out if there are any errors.

  Note

  We are intentionally using an overly simplistic method of validating email addresses here to avoid complexity.