Quick UI Examples
Let's go through some User Interface (UI) examples to better understand the flows and events that will happen here. This is how the form will look when the user opens the page:
![Figure 2.1: UI form example](https://static.packt-cdn.com/products/9781838645564/graphics/image/B14873_02_01.jpg)
Figure 2.1: UI form example
If the username
is blank, an error message shows up at the top of the page, as shown in the following figure:
![Figure 2.2: Error message while validating the username field](https://static.packt-cdn.com/products/9781838645564/graphics/image/B14873_02_02.jpg)
Figure 2.2: Error message while validating the username field
If the passwords don't match, the following error message will pop up:
![Figure 2.3: Error message while validating the password field](https://static.packt-cdn.com/products/9781838645564/graphics/image/B14873_02_03.jpg)
Figure 2.3: Error message while validating the password field
If there are multiple errors in the same form, both the error messages will pop up:
![Figure 2.4: Error messages while validating the username and password fields](https://static.packt-cdn.com/products/9781838645564/graphics/image/B14873_02_04.jpg)
Figure 2.4: Error messages while validating the username and password fields
These are just a few of the examples that we will be dealing with along the way. The purpose of these examples was to illustrate the general flow for the forms that we are going to build in the following section and make it easier for us to visually relate to. Let's start by building the states and validations in the form.