React Bootstrap Form Validation Example

hi this is mukhtar from codingmoney.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 sms bing as you can see it's got date picker drop down select country select and auto complete drop down select for profession as you can see we'll be validating a real form 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 the occupations or the complete drop down select so let's get started [Music] like i said sms bing is a real project that i'm working on currently and once completed it'll go live on the internet so that anyone can use it i'm a self.developer so i'll use real life projects to do case study on variety of subjects that ranges from how i learned the mernstag 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 form in three simple and easy steps in the first step we'll use a react hook called the use state to initialize two empty objects to store form data and form errors we'll store the data from the form into the form object and form errors into the errors object in the second step we'll 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 we'll find errors using a function called validate form and if there are no errors we'll submit the form now let's start coding as you can see i'm using a simple react functional component react bootstrap country select type ahead form container this is the form container the company that i created to basically center the form and i'm using professions the data for the drop down for uh professions it's basically an array with the values uh so as you can see this just a simple react bootstrap form elements uh nothing special um this is what i'm using react bootstrap if you go come to the website uh react bootstrap forms 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 uh useful uh currently we're using just this a single selection so basically this is our starting point we have uh we have no validation as you can see so we'll start with the first step we'll use the usted hook to initialize tmt objects for storing form data and errors so let's do that let's go back to the top i'll import the use state hook from react and here i'll initialize form set form equal to use state empty object um errors set errors state our first step is done so if you don't know how to use that hook works it's 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 the usted hook works in case you didn't know that's the first step which is done let's go to the second step the 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 forms 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 target e target dot value so he is the event so whenever that event occurs uh whenever a user changes the element then we want to capture the value from e.target.value and show it into the console log so let's try that so if i go here and take a look at the console and if i change the value you will see that the value is captured on change whenever a user changes the value in the element it will be captured so that's when we need to set the value of this field into the form object const set field it'll take two arguments field value and we want to call the set form form and field value so what this is doing is preserve whatever inside the form object it will not change the form 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'll also check for errors if there are errors for that field for the same field that we're setting if there's errors then we want to set errors do the same thing with the spread operator don't change the errors object and set the field to now remove that error from that field if there's already one so that's the set 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 so called the dob and the second argument was the value so once the value has been set we can access we can access the value we'll assign the value to the form dot dop 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 the red border around the field like which i showed you in the demo and under the form control we need form dot control 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 dob field so um to save time i'll pause the video and i'll do the same for all the other fields i've gone ahead i 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 it will show a red border and [Music] also on change you see i'm not passing the event we don't have access to that one here there's selected and how i know i need to use the selected 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 div with the class name of red in case there's an errors for the location and where these classes are coming from i i wrote them and i've already defined these classes and that's how it will be triggered in case there is an error for this field so we're done with the second step now we have to do the last and final step the the third step in which we will have to handle the submit we want to handle submit when a user clicks on the continue button so let's add an all click handler to the continue button we'll go down to find a button and here i will add the on click event and then i'll call the handle submit function from here currently we don't have that function so we need to write that over here submit there will be a event pass to this one and we will prevent the default behavior of the form which is e dot prevent default you might already know when um 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 dot prevent default and what what i want to do for now i just want to console log the form i'll save it and see if i can get the if the form filter being set correctly so i'm going to select this well first of all i need to press ctrl shift j to open up the console and i'll just uh select values over here random values and so uh when i click uh 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 um 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 validate form function which is not created the purpose for this function will be to return all the errors if there are any and once the errors are returned it will be stored into the forms errors variable so let's uh create that function const valley validate form accounts i'm going to get the ub [Music] gender location occupation seeking bio from the form object and i'll store all the errors new errors into this empty object and then at the end i will return the new errors object and to do the form validation i will check for dob if there is no date of birth or if date of birth is equal to if it's empty then i will add a new error i'll add an error for dob and i'll say please please enter your date of birth else if i'll say calc age neopf date of birth is less than 18 years of age then i'm going to add an error for dub and would say you need to be at least 18 years old i'll do the same for all the other elements i've gone ahead added the validation conditions for all the other uh input fields as you can see over here and also copied the function calculate calc h to calculate h from the date of birth that we needed over here to check for the user's age the validate function is complete so now we need to proceed with the handle submit we'll check for the errors if object dot keys form errors dot link is greater than zero which means if there are errors and the form errors object then we need to set errors form errors we need to set the errors object remember this one that we initialize in the beginning we need to set this errors object with the form errors else if there are no errors then submit the form that's it we're done with our form validation before we end the video let's do a quick testing so if i try to submit the form without uh inserting any information you'll get an error so if i select today's date and we input the information let's request it the errors disappear after further check it 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 the beginners uh that's it for today and check back soon for another tutorial

Channel: Coding Money

Views: 20,622

Keywords: react bootstrap form validation example, react, bootstrap, form validation, country select, tutorial, coding money, sign up form, user registration, react hooks, React, react signup form, react js, react registration form validation, react hook form tutorial, react forms, react-hook-form vs formik, react forms with hooks, react hook form validation, how to add react form validation, react form validation, react signup form validation, create registration react form, formik

Id: PCZ-ByiRxT8

Length: 17min 42sec (1062 seconds)

Published: Mon Apr 18 2022