Forms and input validation in React with no tears!

4 min readJul 3, 2021

Context

Whenever you want to capture information from users, you will most probably need forms. However Forms can be painful to deal with, specifically when you many data types and each have a different set of validation rules.

In this post, we will go through how to build forms, in a reusable fashion, that makes your developers much more efficient whey work with user data submission.

By the way, this topic belongs to the series to set up a Single Page Application using React, Redux and Asp.NET 5.0.

End Result

Here is how the end result will look like, with the validation rules fired. They automatically disappear if the validation rule is met, and as you type.

Also before we get into implementation, let’s have a look at how the actual form will look like from the developer’s point of view:

All we are doing here, is to define the validation logic, create the input fields, and define what happens when the user presses the submit function. Also note that the React component is inheriting from Form class, which contains all the logic around rendering controls such as renderInput.

I will include the full form with all the page logic and state management at the end of the post, but for now let’s keep things simple.

Libraries

To achieve this, I am using Joi Browser a client side validation library from.

1. Validation Schema

Defining validation schema with Joi-Browser is pretty simple and straightforward, as it is using a fluent structure. You just define what it is that you want to validate and how (like the userName, and password), and what error message you would like to show. For more information on various validation functions, refer to their Github page.

2. Rendering Input Fields

I have centralised the logic I use to render form elements, so it won’t be spreading across so many files. Below you find the renderInput function, that renders text input controls along with a placeholder for errors and all the css.

and here is the input element, that uses Semantic UI controls under the hood, although it can be replaced with any other control library.

3. Validation and Submit

Next we will need to render the submit button, that will submit the form data to the backend:

As you can see it invokes a function to perform full validation, and that function is using Joi-Browser to perform the validation function, along with any other third party validation process. So it would like to extend Joi schema rules, and have other types of validations as well, that’s the place.

and finally this is how I manage data across all the controls, which will be finally kept in this.state.data:

Adding more render controls?

You can definitely add more control types such as dates, credit cards, dropdown … as many as you like, and define how you would like the errors to be shown on those controls. Here is another example:

For a full list of control render functions including checkbox, dropdown, credit card, date, etc, consider using our software ecosystem, Pellerex.

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

Full Code

As promised here are the full code for both LoginForm and the base class Form which contains all the validation rules:

And the base form:

Pellerex Foundation: For Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.