Form Validation in React JS | React Form Validation | Validate Form in React

hi everyone this video is about Forum validation in your app.js I have already created this design so we will validate this name email and password without any Library so let's get started this is the design that I updated in bootstrap and now first of all we will declare our able to store the values of input fields in that comes we'll use it available and that is an object type with us so we have three properties in that the first one would be the name with us initial value empty string email and also the password and so we have name email and password here and now let's get to get the inputs whenever we are writing something here so we should get store that value here so for that I will call a function here and change handle input I will copy this for other email and password too now let's create that function so I will create a new object Ive is equal to the previous values now we will update the names whenever we are updating the name so we should write something like this given Dot Target dot name if you are updating the name so it will right here the name if email email a password it will put here the password okay here name in person we have here so here are the light event to return it dot value to restore the video of that in this new object now I will update the videos sheet values and new object I've read the videos so after updating the video so now we never replace this validation function this button so it will call this form and submit function submit event handle validation I will call this function when we press that button function Al validation we will get an event here they will prevent default submission so now I will I have created another file by the name of our edition.js validation.js okay there is nothing so here I will create a function to validate the videos what I will do I will simply write a validation before that I will create a function here and I will pass values to this function the validation has imported and I will pass the values to that function so now I will um perform addition here in this function before that so whenever an error record for example here is an error in name or password or email so what we should do we should return a value from this file okay so we will create an object for the errors also foreign with an empty object yes sorry state errors it is it is an object type with us we will store the errors in that we will simply call here City errors foreign so let's here first I will create any errors object after that I will increase pattern for our name password and email the regular expression okay [Music] um foreign is equal to I will write I will write my regular expression in this between these so first of all have a light not it means without without space and at accept all characters so then we will add plus it means one are more than one in email after for example example but then we have in hat sign after at sign again we should have accept all the characters without at end space then we we can also specify length here okay and then we have as dot slash dot after that again we have without space in art exit all characters Alpha I will specify length here for example from two to four okay AR two to six I specified the length for that it was our email pattern so let's try one for password I wrote this pattern for password in this pattern will mean that at least one digit at least one small character in at least one Capital character and also A to Z small back end zero to nine and the length would be from the small length would be 8 and then how many character you would like to write so you can see it for the password so here for the for the password for the name we will not write so now let's write so first of all addition is for the name type uh for my first values here videos okay values dot name was equal to equal to empty so what it should do errors that name is equal to name choir this was just for the name okay name should not be empty and now we will write for email info not email button DOT test with values email if the email didn't meet with this pattern so it will be file so then we should write a message errors email is equal to email is not correct else if the email was okay so before we should test the email that the image should not be empty foreign [Music] sorry I didn't h so now we will also radiate the password paper values dot password and you contribute with empty errors and password is equal to okay quiet as we should test so it is elsea with us and also I will write for password a password protector will you start foreign so now we will return the errors so okay whenever we return the error so now we will write the errors here okay just simply in under the input field I will write if errors Dot name was to it means if here was the name was available so the inverted shift it will print a value and here we will print error start name and also I will apply a style in this color right same to the survey light for the email and password email color rate and also write further password password that's the case so now let's test it so let's press this button and it is called so let's see where is the arrow we haven't entered validation it is okay window preview default so we first will use or we should not distract it because it is it's not a react component so now let's test it let's place this button validate see image required email is required in phosphere list required so let's type name yourself and if you press the validate that has gone so now we will write email add email if you write something like this email didn't mean if you write that one character again didn't match every right two or three character see it okay if you write more than six current character so now I gained it into which okay didn't pitch because we have set the length to this uh two to four six so now let's try the password The password should have at least one digit when a small up and capital letter I wrote just small end number uh oh sorry I should print that here just come here and yeah yeah here the ears yes it should be the password SuperSonics required password didn't mean if I write all of them so it's okay the Forum is validated so now we will just come here if we will check the error the length of this object only this we will check the link if the length was zero so then we will submit our Forum we will call the API or whatever we would like to pass the data so we will curl that and we will pass the our data there so it was all about Forum validation in reactors so if you like this video please subscribe to our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 37,577

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

Id: U4w3kvYePFs

Length: 14min 20sec (860 seconds)

Published: Tue Feb 07 2023