Easiest User Validation on authentication with indicative on ReactJS

I hate Manual User Validation setup on projects, there are so many third-party validation packages out there but choosing correct one is difficult. In one of my recent project, I was using indicative as a User Validation Package so I thought to help others by showing How it works.

Let's start,

I am hoping that you already know about reactjs and you have already installed react on your project. For the next step, let's make a react signup form component :

Note:- The signup component that you see above is from one of my project so there are many things like the Background image, styles and much more that are not shown here. This is just to give you an idea of how a signup component will look like.

So we have a form with input elements like username, email, password and a confirm password.

Next step is to have a state to store all the input values from the input field,

After the class and before the render() declare a state with the following fields

state

Now that we have declared the state lets move towards getting the value. To get the value is easy all we need an event handler on the input elements. In this case, we want to fetch each character User types and store in the state so let's have an onChange event handler.

HandleInputChange

Next, we have to make the function and add a certain piece of logic to it to fetch the Value.

Now we are done with handleInputChange() so next, we move towards submitting the form using handleSubmit

onSubmit={this.handleSubmit}

Let's build the handleSubmit function and explore more

We have our handleSubmit function and I have added a comment line to where we will be implementing our predefined indicative functions.

Let's move on towards installing the indicative package: on your terminal enter this code.

npm i indicative — save

This will install indicative package and you need to import the validateAll attribute from indicative

import { validateAll } from ‘indicative’;

In the above image, you can see we have used data and rules. The data stores all the user input from the state and indicative package need some rules to function so we have rules of the name, email, password

name: ‘required|string’, // indicated that name field is required with string values and same with email as well

password: ‘required|string|min:6|confirmed’, // min:6 here indicates a minimum of 6 characters and confirmed checks for password confirmation.

Inside the handleSubmit function and below the rules add validateAll().

validateAll

ValidateAll() will take two arguments one is data and another is rules then it returns a promise with .then() and .catch().

If you head over to your console and hit submit/register without filling up the form you will get a list of an object as errors.

Ignore the UI of the form and just look at the error on the console. You will see an object stating the error of missing fields.

For now, we can see the error on our console but to show the error to users we need to fetch the error from the console.

We fetch the errors and for each error, we generate an error message from the specific error field and we set state the errors.

To show a proper message to the user we use custom message.

Inside the handleSubmit function and above validateAll make a message variable to store messages.

As you can see above we have the format predefined by indicative

required: ‘ This {{ field }} is required.’ // This is to show that all fields are required by passing {{ field }}.

‘email.email’: ‘The email is invalid.’ // This checks if email entered by the user matches the email format then it passes the case else it shows The email is invalid. ( All user matches are predefined by indicative ).

‘password.confirmed’: ‘The password does not match’ //Checks if the password entered matches the confirmed password if not shows error message as “The password does not match”.

And that’s all, I tried my best to make you understand this part which is a bit complicated.

Now you try out on your own register component for me, I will show you the images.

Shows error message when everything is empty

Email is invalid on given in the wrong format and see password don't match as well

So, I hope You have understood the whole UserValidation Procedure and you can use this same on any of your projects. If you see errors you can comment below and I will be happy to help.

Follow Me On Github:- https://github.com/sandipguchait

Thanks for reading the article and I Hope you have a great Day.

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >