Form Validation in React JS and React-Bootstrap without using any library

https://www.youtube.com/watch?v=PCZ-ByiRxT8

Hi, this is Mukhtar from coding money.com. And by the end of this tutorial video you’ll be able to do bootstrap form validation and react. JS We’ll be validating this form from one of my real projects called Smith. As big as you can see, it’s got Date Picker Dropdown Select.

Countries select. I know the complete dropdown select for profession. As you can see, we would be validating a real farm unlike some other tutorials that only shows you how to do a validation on a text field. This is going to be a really nice learning experience because you’ll be also validating third party components like the location and occupations or the complete dropdown select. So let’s get started. Like I said, a Swiss bank is a real project that I’m working on currently. In Once Completed, it’ll go live on the Internet so that anyone can use it.

I’m a self-taught developer, so I’ll use real life projects to do case study on a variety of subjects that ranges from how I learned to learn stuck developing websites from scratch to do online marketing and search engine optimization, all the way to monetizing and making money from it and will share the results with you on my YouTube channel. So if you don’t want to miss that, then please subscribe to my YouTube channel and don’t forget to hit the notification bell. Now back to our form validation. We will validate our farm in three simple and easy steps, and the first step will use a react hook called the you state to initialize to empty objects to start form data in form enters will store the data from the form into the form object and form errors into the errors object. And the second step will capture input on change. So if a user changes any field, we want to set that field along with the value into the form object and remove error for that field from errors object if there is any. In the third step we will handle submit in which will find errors using a function called validate form. And if there are no errors, we’ll submit the farm. Now let’s start coding.

As you can see, I’m using a simple react function component. React Bootstrap country select type ahead font container. This is the form container, the component that I created to basically center the form and I’m using professions. The data for the dropdown for professions is basically an array with the values.

So as you can see, this is just a simple react bootstrap form elements, nothing special. This is what I’m using. React Bootstrap. If you go come to the website, React Bootstrap Farms, this is the country select if you want to learn more about that and also the type ahead.

I wanted to show you this example. It also has the ability to do multiple selections like this one, which I think you’ll find it useful. Currently we’re using just a single selection. So basically this is our starting point.

We have we have no validation, as you can see. So we’ll start with the first step. We’ll use the use dead hook to initialize team to object for storing funded and errors. So let’s do that. Let’s go back to the top of import the use state hook from React and here I’ll initialize.

Form a form equal to is a state empty object. Errors. Set errors. So it. Our first step is done. So if you don’t know how to use that, hook works as basically this is the variable which is initialized to empty object.

However, we also get a function to set this variable to set values inside this variable. So this is how to use state hook works. In case you didn’t know, that’s the first step which is done. Let’s go to the second step.

Second step is to capture input on change. We’ll create a function called Set Field, which will add the field with the value to the farm’s object. Remove error for that field from errors object, if any. So let’s do that.

How do we capture value on change? We can capture value on change by using on change attribute. And passing a callback function to this one. We don’t target very. So he is the event. So whenever that event occurs, whenever a user changes the element, then we want to capture the value from either target dot value and show

it into the console lock. So let’s try that. So if I. Well here and take a look at the console. And if I change the value. You will see that the values captured on change. Whenever a user changes the value and the element, it will be captured.

So that’s when we need to set the value of this field into the form object constants. It’ll. Two arguments field. Oh, you. And we want to call to set for. Formed and sealed. Value. So what this is doing is preserve whatever inside the farm object.

It will not change the farm object. It will just add the field and the value if there is no field with the same name, if there is already a field with the same name, it will just change the value.

So we will also check for errors. Their errors for that field. For the same field that they’re setting. If there’s errors, then we want to see. Errors. Do the same thing with the spread out, brother. Don’t change the letters object and set the field.

To remove that error from that field if there’s already one. Does this field function now? We’ll use this set field function on change for all the elements. So now on change, we’ll set field. Remember the first argument was the field.

Called the deal. B And the second argument was the value. So once the value has been set, we can access we can access the value. Will assign the value to the and to Europe. We can assign the value to the value attribute.

Also, we need an attribute called as invalid. In case there is an error. For this field. This will be set to true. And once that is changed to true, you get that red border around the field like I showed you in the demo and under the farm control.

We need form dot to show that feedback. And type will be invalid. So in case there is an error, we need to display the error from the errors object. And for the GOP field. So to save time, I’ll pause the video and I’ll do the same for all the other fields.

I’ve gone ahead, did the same thing for all the other elements except for the third party components like the location and professions. I did something a little bit differently, as you can see. Instead of the invalid attribute, I use the class name in case there is an errors and to show a red border and also on change

. You see, I’m not passing the event. We don’t have access to that on here. There’s selected and how I know I need to use the selector. The over here is from the documentation. The link that I showed you in the beginning.

And instead of the form form control feedback here, I’m just using a simple dev with the class name of red in case there’s an editor’s for the location and where these classes are coming from. I wrote them and I have already defined these classes and that’s how it will be triggered in case there is an error for

this field. So we are done with the second step. Now we have to do the last and final step at the third step and which we will have to handle the submit we want to handle submit when the user clicks on the continue button.

So let’s add an all click handler to the Continue button. We’ll go down to find the button and here I’ll add the on click. Then. And then we’ll call the handle submit function from here. Currently we don’t have that function, so we need to write that over here.

And. Submit. And there will be event passed to this one. And we will prevent the default behavior of the form, which is you don’t prevent default. You might already know when the default behavior of form, when you click the submit button is to post it, post the data somewhere.

But here we want to prevent that default behavior by using that event that prevent default. And what what I want to do for now, I just want to show law. The four. I’ll save it and see. If I can get the if the farm fields are being set correctly.

So I’m going to select this. Well, first of all, I need to press control Chef J to open up the console. And I’ll just select values over here. Random values and. So when I click the Continue button, I should be able to see all the values over here.

So you see, these are all coming from the form object and I can see these fields are being set correctly. But we’re not checking for errors. So let’s check for the errors. And once we are sure that there are no errors, that’s when we need to submit the form.

So let’s check for the errors. So here to check for the errors, I’m going to create a variable called form errors and I’ll call a validate. They? Or function which is not created. The purpose for this function will be to return all the errors.

If there are any and was the errors are returned, it will be stolen to the farm’s errors variable. So let’s create that. Function. Once the valley. Would think. Form. Just. And I’m going to get to be gender. Asian occupation seeking bio from a foreign object.

And I’ll store all the errors. Into this empty object. And then at the end, I will return. Neil Ayres object and to do the phone validate well check for Toby if there there is no date of birth or if a date of birth is equal to.

If it’s empty, then I will add new error. I’ll add an error for the OBE and I’ll say please. Enter your date of birth. Both. Yeah. I’ll say it as date of birth as to less than 18 years of age.

I’m going to. Add an error for do you be? I would say you need to at least. 18. There is. I’ll do the same for all the other elements I’ve got to had added the validation conditions for all the other input fields.

As you can see, we’re here and also copied the function calculate calc age to calculate age from the date of birth that we need over here to check for the uses age. The validate function is complete, so now we need to proceed with the handle submit.

We’ll check for the errors. If you checked dark keys. First. The thing. It’s greater than zero, which means if there are errors and the form errors object, then we need to. Editor’s. Farm errors. We need to set the IRS’s object.

Remember this. That we. Initialized in the beginning. We need to set this errors object. With the form errors. Both of their no errors then. Submit the form. That said, we’re done with our farm validation before we end the video.

Let’s do a quick testing. So if I try to submit the form without inserting any information, you’ll get an error. So if I select a date state and we input the information requested the errors disappear. Have their first check and will show you.

So you need to be at least 18 years of age. So. That said, this took a little longer than expected because I really wanted to accommodate the beginners. That’s it for today. And check back soon for another tutorial.

Coding Money