Form Validation in React JS (React Form Validation)

hello everyone uh in this video we will just validate this registration form using react.js this is the design that I have already created this design just HTML code so let's check it okay this is the input field for name for email password and confirm password right now whenever we are writing something in this input fields we should store them somewhere or get stored in let's create a state variable in object cast Forum data set for data is equal to use State this is your object with us this has the name or username and empty string then the um email password and confirm password so this is the object that we has created so right now whenever we write something and these input fields we should store them in these fields so for that let's write on change event and we will call handle change we will call this method let's create this method now we will get an image so here I will just start name and video from this event I'm right like this counts name and value is equal to e dot Target after distracting them so now let's update our state it will update now this first form data method state to form data let's call that this is an object with us we will first of all write the Forum data the previous data it means the previous data then we will update our name is equal to name it means that if the name was username so it will be empty it will update the username if that was immediate will update name and it is sent to this is equal to with value so after storing the data in these fields so now we will just for Forum um validation again so far the validation whenever we press this submittee button okay the submit button we should call our function just come here and we will call on submit handle submit okay for example this is the function so let's create it now let's create this function cast handle submit is equal to we will get an event let's prevent default submission and after that so now we will start our validation over editing our input fields so first of all I will just create an object for the years validation errors this is an object where we will store the errors so let's first of all apply the a validation for input Fields if the input field was empty the username was empty so then we should store a message that the name is the name is required there was no video in form data dot username that same team will just remove the space from that okay if that was empty so then we will store a message inside this validation errors validation errors dot username is equal to username user name is required and after this we will just perform the same operation on email okay let's check first of all the and the name is email password and this is confirm password okay not Forum data Dot email dot rate if there was no video in email so just write validation Heroes Dot email is equal to email is required else if if there was video so now we will just check the his data validated email or not so for that format I will just use first of all forward slash then yeah these two will be power slash then um capital is okay it means without space okay all characters plus it means without character accept all characters one or more this plus means one or more and after this we should have in Earth sign and after that we should have more characters yes and after characters we should have a DOT or that we will use slash Dot and then we have more characters slash S and plus this is the format that a regular expression that we will use for the email now we will use DOT test function okay to test this regular expression with the Forum data dot email if now we will assign here not okay if this regular expression was not tested was not matched with the email so then it will come here and we will assign a message okay copy this line paste it here in validation email email is not wallet this was part of the image so now we will move to the password so for the password we will do something like this okay copy wants this just save the time form data instead of this I will light password and here also password is required and here we will just use Forum data dot password dot length was listing six characters so password six character okay and this is password now we will move to the confirm password so to confirm the to just validator confirm password a forum data Dot confirm password was not equal to equal to wither Forum data dot password validation errors dot confirm password is equal to password not matched so this is the validation messages that we have assigned to validation editors now we will just assign these two errors object so let's first of all create an errors object const here sit errors is equal to U State this is in our empty object so now let's assign this set errors validation errors if there was no error so how to handle that okay to submit the form so for that we will write April object dot keys validation errors that length was equal to equal to with 0 alert forum submitted so now let's come here down we should display now the errors so to display the errors just come here and here we will write F errors dot username if there was the gives any errors so then we will store that and we will display that for that we will use pen tag and here let's display that here start username same to this let's see if we should cut this and we should display that in a down from input fields and copy this now just come here to the password field email field paste it here and just change this to the email and also this changes to email then come to the password and finally come to the confirm password yeah that is okay so let's check it now let's come here to this this is our Forum so let's press submit button what is the result it means that we didn't um just handle our errors let's check it on submit handle submit spelling mistake having default and also let's check other ears and here we should write plus sign and come down we should write this and all input fields same to password and confirm password so let's save it and we will try it now okay we will check it now now appreciate let's come here press submit button see all username email and password let's write here resubmit that has gone it's it should give us the error email not valid see email is not valid .com if I write like this the email has gone password example one two three four five see password should be at least six and five and six see that error has gone four see password not matched five and six C program submitted successfully then the Forum will be submitted so it was the Hair Forum handling or error validation from a rubberization in reactors discuss the code and I have wrote this for relation in the same file you can write it in the separate file and just call this four normal Edition the submit and this function call a function inside this function okay

Channel: Code With Yousaf

Views: 28,470

Keywords: react form validation, form validation in react js, form validation in react, react forms, how to add react form validation, react form validation best practices, react form validation hooks, react hook form validation, react, react js, react registration form validation, form validation, form validation react, react js form validation, react signup form validation, react js form validation in hindi, custom form validation in react js, form validation in react js in hindi

Id: yra7iNwAjL4

Length: 13min 9sec (789 seconds)

Published: Thu Aug 03 2023