Form validation is an essential feature for any application that collects user input. It ensures that the data entered by the user is correct. Without validation, our database would be filled with incorrect or incomplete data which would lead to errors, security issues, or a poor user experience.
In this post, we will be looking at how to validate a form with React form using as an example an application to reserve office spaces, built using the Expo ecosystem and Supabase platform as the storage manager.
Initializing form fields
To start with the validation process, we need to define the form fields, for this let’s use the useState React hook. This will help us to store and update the input field values.
UX as prevention
Interacting with the system is prone to errors by the user. That is why the UX is an important factor in the creation of a form, beyond displaying error or success messages, it helps avoid or minimize the introduction of erroneous data and facilitates the understanding of the form by the user.
Next, let’s define some behaviors to allow the user to select valid values by allowing reservations to be created after the current time and always keeping the start time less than or equal to the end time, and vice versa. This will ensure that the selected time range is valid.
- When the user selects a date, if the selected date is today, the app will set the time fields with available hours after the current time. This will prevent the creation of reservations in the past.
- A second interaction occurs between the start and end time fields. Let’s say the user selects 10:00 AM in the start date, the end date options are updated to be after the start date value and if the user selects 4:00 PM in the end date field, the start date options are updated to be before the end date. This prevents the user from attempting to create a reservation with an incorrect date range.
Validating input information
The goal is to prepare the system to validate the information once the user submits the form, so let’s define a function and call it isFormValid which will check if all form fields are correct, otherwise, this function will set the appropriate error message.
Backend validations
In addition to field values, we cannot skip validating the availability of the selected rooms, which is directly related to the business of the application. To achieve this, we will be using the Subapase database client to fetch the needed information, as the first point we need to fetch reservations made for the selected room:
The selected room is available if there are no reservations for the selected room or if the ones that exist don’t overlap with the selected time.
Finally, we need to indicate to the user the success process message. In the example, we will redirect them to a success page. This is the result of the validation process in the example application:
Final Thoughts
Data is an important aspect of systems and validating the kind of data that flows through it can help us provide a greater experience while operating it. In this example, we took advantage of the useEffect and useState hooks to perform validation on every field change to display the appropriate feedback to the user.
That is all for now, see you in the next one 👋🏽
