Partial and complete validation of the form with Joi on React

Recently I started using Joi to validate forms on my React application.

In this code snippet I’ll show you how to do a partial and a full validation

The partial one when I’m typing, while the full validation when I click on the submit button.

Below here the syntax of the schema:

Now I necessarily split the schema into more parts because I had to export different models from the file.

To make it more readable, the code becomes like this:

In the frontend it will look like this:

In this case the handleChange function (with the three required parameters) will be called at the onChange event of the form and at the end we will call the validationPayload function.

Into my Errors state I have an object with all errors divided for keys.

Enjoy mates!