Form Validation using React | React Forms Handling & Validation Tutorial | React Sign up Form

hey what's going on guys welcome back to another video so in the last video we saw a quick way to handle and validate form in react.js using react hook form package but in this video i want to show you how you can handle and validate form in react.js without using any external package or library and that is because most of the big companies they use minimum external libraries and packages let me show you the demo so this is the same form we used in our last video and the validations are also almost same the only difference is that we are not using the react hook form and we did every validation natively so if i click on the submit button we are going to get an error that the username is required email is required and password is required so if i fill the username so let me type the page then now if i try to submit it then it will give me an error on the email and the password so let's try with the email and if we try to submit it then the email is not a valid email so we need to have a uh at the rate gmail.com and now if i try to submit it then it's a valid and for the password if we are less than four characters then it's going to give us an error that password must be more than four characters and if we go more than 10 characters then again it's going to give us an error and if we satisfy all the three fills then we should be able to submit the form and when i submit the form then be signed in successfully so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] alright guys if you are looking for a full-time job opportunity for you then i have an exciting news from re-level by an academy it is india's first platform to help all aspirants have access to their dream job by taking the re-level test they engage in comprehensive skill assessment which industry evaluates relevant skills and their job readiness if you wish to showcase your skills to the best companies in india like credit grow upgrade me show and many more then what you can do is you can take part for the re-level test for free on the platform based on your skills and time and if you pass the re-level test they guarantee minimum package of 4 lakhs per annum for non-tech rolls and 6 lakhs per annum for tech rolls people are getting packages up to 15 lakhs per annum as well there is no age or experience limit for the eligibility if you are 18 plus or 40 years of age you can attempt the re-level test to get 50 plus hike for your next job in the best product based companies re-level has changing lives for months now find all the people who took the best decision of their lives with re-level through their platform with the re-level achievers twitter handle let's see how we can register for the test so we will go to the re-level platform and just click on the get hired now based on the skills we will select the test i will select front-end development test we can see the details and then we can select the slot based on our availability and then we just need to upload our video resume that's all sit back take the test and companies will reach out to you based on your score you will find all the links related to the real level in the description of the video alright guys so this is the same code which we used in our last video and i have removed everything i have removed the react hook form library and the usage of the library for this form and i have only kept the simple jsx where we have the form tag inside the form tag we have an h1 so i change the registration uh to login and then we have a divider we have a div with a ui form so all these classes are coming from the semantic ui and then we created the fields for user name email and password and a button to submit the form and if i click on the submit nothing is going to happen it is just the plain jsx or we can say the html of the form now the first thing we need to do is we need to manage the state of our fills using the use state so let's create the state variable so what i will do i'm going to create a constant with the initial values and i need the initial values to be a object and this object will contain the username so this will be a username and empty fill and then i'm going to have an email which will be an empty and then i'm going to have a password which will also be an empty so this is the initial state i want to have and now what i will do i'm going to create a state so my name of the state will be form values and i'm going to have set form values and this will be equals to the use state so i need to import the use state so let's go here and import the use date so i'm going to make a import and you can import the use state like this and this will be coming from the react so let's add the react so if you don't know about the use state then i have a video on it you can click on the card above and jump to it directly so now we have the use state we have make use of the use state we need to pass an initial value and this will be the initial value we created so let's pass it here all right so now we have the initial values and now what we will do we are going to go to the input fields and we are going to bind the value of the input field with this form values so this is my input fill i'm going to add a value and the value will be the form value so i'm going to add the form values dot this will be and username so let me just do a copy paste so i'm going to copy this and i'm going to add it here and this will change to email and this will become the password so let me add the password here all right so we have added the values and now it's linked with our use state so next thing we need to do is whenever we write something in the form fill we need to bind or update the value of the username or email or password so we need to add an on change so let me add a on change here and on change i'm going to handle the change so i'm going to create a function with a handle change so let's copy this and add it to all our input files so i'm going to add it here as well all right so we have added and now we need to create the function first so let's write a function so i'm going to write a constant this will be a handle change and it's an arrow function so let's have the arrow function and we are going to get the event here so let me have the event and i'm just going to do a console dot log of event dot target and let's see what we get it so now let's go here and let's do the inspect element and if i go to the console and let me clear the console and if i type anything then i actually get the input element itself so what we are going to do is first we are going to lets the structure we need two fills we need the name of the input fill and we need the value of the input field and this both are available in the event dot target now what we can do is we are going to set the form values so let me set the form values and this is an object so first i'm going to take all the initial state so that will be equals to the form values and once i get the initial state next thing i will do is i'm going to add a name and i'm going to add the value for that name so let me add the value here so let me add the value all right now let's do a console log so i'm going to do a console log of the form values so we have set the form values and now see what we have in this form values so i will refresh it i will go to the inspect element in the console i will clear the console and if i type anything so let me first remove this console of the event target we don't want it and now if i type anything the page then you will see that what we are getting is here if i go here then here you will see that we have the email we have the name field and we have the password and the user name but this is not what i want so what i will do i'm going to add a square braces here so that it going to take the username as the key and then it will assign the value to the key all right so now if i save it i refresh it then let's type something so if i type the page then you will see that we have the the page here and we get the fill so in this way we whatever we type in this in form we are going to set the values of the form in the form values all right so the next thing we need to do is we need to submit the form so whenever i click on the submit form i need to see all the values so what i will do i will go to this form and on the form we are going to create a on submit so let me add an on submit and i'm going to give it as a handle submit function and let's create the handle submit so i'm going to have a constant this will be a handle submit and we are going to have an arrow function and it will get an event and we are going to add event.prevent so that we can prevent it the page getting refreshed so i'm going to add a even dot prevent default and i will do a i will not do a console log but what i will do is i'm going to add something here so that we can see our data whatever the data we are filling in the form so here i'm going to add a pre all right and inside the pre i'm going to add a json dot stringify and this is going to stringify the form values for us i'm going to give an undefined second parameter and i'm going to add two all right so now if i type anything here i should be able to see it in my uh text here so i have a test at the rate gmail.com and the last one is the password and now if i click on the submit the page will not get refreshed but we need to make the use of a validation because we if i do a empty fills and if i click on the submit then it will still be able to submit so what we need to do we need to validate the form so we are going to create a validate function that is going to validate the form values so i'm going to write a validate function here so i'm going to create a constant and then i'm going to write a validate this will be an arrow function all right and it will first take all the form values which we have submitted so that will be the form values and what we need to do whenever we submit the form we are going to pass these form values so i'm going to call a validate function and inside the validate function i'm going to pass the form values but what we need to do is i'm going to create one more state variable for our errors so i'm going to copy this and i'm going to add it here and i will just change this to errors and this will become errors and the initial will be an empty object all right and then whenever we do a handle submit i'm going to set the form errors so i made a spelling mistake so let's copy this and let's pass the form errors here all right so we are now taking all the form values we are passing it to a validate function and whatever the outcome of the validation we are setting it in the form errors which is an object so inside this validate function i am going to create in errors object so let me have an errors object the initial object and i'm also going to write a regex for our email so i will just do a copy paste of the regex which you can get it from the internet for validating the email and now i'm start going to check for each of the values so if this values dot username all right if we don't have the username then what i will do i'm going to write a errors dot then to the user name and i'm going to add it here as user name is required all right so this is for the user name similarly i'm going to have it for the other two so if this is an email and if this is an password then we need email is required and here it will become password is required all right and then what we will do is uh in the end we are going to return this error so i'm going to return here the error object so i have returned the error object from here and this error object will be now set in the set form errors which is the the form errors which we have making the use state and has the initial value of an omt object so what i will do i will create one more uh use state variable and that will be for the just a flag for our submit so is submit and i'm going to set it as set is submit and the initial value of the flag will be the false so i'm going to make it false all right and whenever i click on the submit button i will set this flag to true so i'm going to set this flag to true all right so we have set the is submit as true and what i want that as soon as all the three fills satisfy the validation criteria i need to able to submit the form so for that i'm going to make use of the use effect and what i will do i will going to write a use effect here so this will be and use effect and it is going to have an arrow function and it will get changed based on the forms areas so i'm going to add a dependency of the form arrays here and inside this what i will do i'm going to make a check that if my object dot keys so this is the object of the forms error object and if it's keys so i need to pass the forms error inside the keys and if the length of this is equals to equals to zero and along with that i'm going to check the ease submit flag if the submit flag is also true and if both the conditions satisfied then i will just simply do a console.log of my form values so these form values will be the correct form values with the proper handling of the form and the validation all right and then i'm just going to do a console.log of my errors object so if we see that if we have any errors or not so i'm going to copy this and i'm going to add it here all right and now let's give a try so if i go to the inspect element if i clear it then let me type the page and if i click on the submit then i will see that says password is required which is not so correct and it says username so let's go to the validation so i hear i need to have an email and here i need to have password all right so now let me give it try and now it says properly that email is required and password is required but we are not able to display the error messages so let's go and display the error message so this is my fields div and here i'm just going to write a paragraph tag and inside the paragraph tag what we have our errors are in the form errors dot email so if this is a username then this will become a username i'm just going to copy this and i will add it here for the email so let me add the email and i'm going to add it here for the password so let me add the password all right so now we have saved it and now we can as soon as i save it you can see that we get the email is required and the password is required so let me remove this and let me refresh it and now if i click on the submit so let me increase the screen first so now if i click on the submit then you will see that all the three fields are required and now if i start typing anything and if i submit it then it will say email and password is required so this is how it is working and we can also do one more thing is we can add more criterias here so what i will do i'm going to add simply some more criteria so if my email the email is required and i'm going to add it here else if regex dot test and test the email so i'm going to add values dot email and this complete if it's not equal then i'm going to add a error.email and this error.email will be that this is not a valid email so i'm going to write this is not a valid email format all right similarly for the password we can add it so i'm going to just copy this i'm going to add it here and this will become values dot password and if this is less than four then i'm going to change this to password and this will become password must be more than four characters all right and if i want to add one more so i will add it this will become greater than so i will change this password cannot exceed more than 10 characters so this will become 10. all right so now we have all the three types of validation and once last thing we do if everything gets satisfied we need to be able to have a sign in successfully something like that so i'm just going to write here so i'm going to copy this condition so if i have this condition satisfied here so let me add it here all right so if i have this condition satisfied if it's true then what i want i want to have a div with a class name of ui message success all right and then inside that i'm going to close this div and here i'm going to write sign in successfully all right and but if this is not satisfied then the other condition will be we need to add the pre statement so let's add this i'm going to cut it and i'm simply going to add it here so then i'm going to add it here all right so now i have saved it and we should be able to see everything so let me expand the screen i will refresh my page so if i submit it then it will say all the three fields are required then let me type the page and if i submit it then it will say that email is required let me add the email and then submit it so it will say that this is not a valid email format so i'm going to add a gmail and then i will try to submit it still not a valid so i'm going to add a gmail.com all right so now last thing the password so i'm going to add just three characters and let's see submit it then password is required it says but it should give me that password cannot be less than four characters so let's go back and let's see actually what we did it here so if the values dot password i need to add a length here so we need to check the length here actually so i'm going to add length here and here all right so i need to refresh my page so let me refresh the page i'm going to add the page here i'm going to add test at the gmail.com and if i submit i will get password is required and if i add three characters and now if i submit it it will say password must be more than four characters and let's go beyond 10 characters then it should give us the password cannot exceed more than 10 characters so all the three fields are having a proper validation and we have satisfied all the criteria and now if i click on the submit then i'm getting assigned and successfully so this is how actually you can handle form and validate the form without using any of the library of course libraries help you to write a very less code but you should also know how you can do stuffs natively so i'm going to add the complete code of this native react form handling in the github repository for your reference so that you can download it and you can play around it so that's all i have in this video i hope you liked the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates and before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 9,833

Rating: 4.9543724 out of 5

Keywords: react, React, react signup form, react js, react registration form validation, react hook form tutorial, react hooks tutorial, #dipeshmalvia, react forms best practices, react forms, react-hook-form vs formik, react forms with hooks, react form validation hooks, react hook form validation, how to add react form validation, react form validation best practices, react form validation package, react form validation, react signup form validation, create registration react form

Id: EYpdEYK25Dc

Length: 21min 21sec (1281 seconds)

Published: Thu Oct 14 2021