Form Validation in React Native with Formik

guys welcome back to my YouTube channel today in this tutorial I'm going to show you how we can validate a form in react native by using formic Library so here as you can see we have a basic form and here we need to provide these informations so first we have the name and as soon as I started typing you can see that the submit button has been disabled and now you can see that it should be 6 characters long and then here we need to put the email address and here we can type something but it is not showing as valid email so we need to provide a valid email so this is a valid email now the error has been gone now we can type the password but for the password field I haven't provided secure text entry so that we can see the details over here and here as you can see this is saying that it must contain minimum 8 characters and all these things it should be 8 characters long now it is 8 characters long but it doesn't qualify as a proper password so that's why we need to provide a special character as well and now we need to put the confirm password and here also we need to put the password properly and it should match with the password field and then we need to provide the mobile number so here we can type something but as you can see here we have a problem it must be only digit so we can type the numbers only and it must be exactly 10 digits long so now our form is validated properly and we have provided the data perfectly so now the button is active and now we can submit it so here we can see the submitted data in Json format so that is the validation as you can see here so this validation I am going to implement in this tutorial by using formic library in react native so if you are interested in these kinds of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification Bell icon so that you get notified whenever I post a new tutorial on this channel so without wasting any more time let's get started what's up so this is our newly created project and in this project I have just this text wrapped with some View and I have provided a status word to have the light content for the status bar and also I have provided some Styles in this project already so that it will help us to create the form UI pretty easily in that way we don't need to waste so much time to create the UI we can quickly move into the validation part so here as you can see these are the Styles which I am going to use so you can pause the screen take note of these codes if you want I am not going to provide any GitHub repo for this project because it doesn't have that much thing it is just to show you the concept and how to use the formic library in react native so let me create the UI quickly so first here we will have the title so for that here we have styles title and after that we need to create text input so you need to import text input from react native and for the placeholder of it I will provide full name for the style of it it will be input style and I will wrap this with a view and it will be input wrapper Style similarly let's copy it few more times after the full name it will be email address then it will be password then it will be confirm password and after that last it will be mobile number and finally here I am going to create a button by using touchable opacity so you need to import touchable opacity from react native as well for the style of it I will use submit button and for the text style of it I will use submit button text so our form has been created now we need to implement the validation and for that we need to install formic Library so this is the official website of this Library let's click on this get started and here we can see the command to install it so I am using npm so that's why I have copied this one now let's paste it so it has been installed and now we need to go to this validation guide and for the validation we need to install this app Library so let's copy this one and install it so these two packages have been installed now after that let's implement it so first we need to wrap our form with formic component which we can import from formic and then we need to import yup so first here let's import and then import from your package and then we need to wrap our form with formic component okay and we need to configure this formic so first we need to provide initial values and for the initial values here we need to provide the value for the field items so as you can see here we have full name email password confirm password and mobile number so we have five form Fields that's why we need to provide the five initial values so first I am creating name and initially the value of it will be empty right so similarly I will create email then password then confirm password and at last we will have mobile and for this formic component we will receive some props within it and that we can access here so first we will have values errors touched handle submit so these are the few which we will get and we will get many other props as well which we will require later but right now initially I am importing this things and within this function we need to provide our form let me cut this from here and it will be here okay so that is how we need to wrap our form with formic component now after wrapping we need to provide a schema for the validation which we can see here so let me copy it from here and paste it here we don't need last name we have name email so for the name it will be string type and minimum it needs to be 6 character long and maximum it could be 50 character long and it will be required and here we can provide the error message which will be displayed if it is not provided and for the mean and Max you can see that these are the message if this criteria are not matching then these error messages will be displayed let me implement it in this basic form then we will complete it after the initial values we need to provide validation schema and for the validation schema we will provide this sign up schema which we have just created okay and now here we can provide the value of it which will be values these values from dot name as we have created this name initial value and this name schema so these things needs to be similar so name here and here and what we are providing here is same that's how it is connected now after that we will require few other props as well let me get those so it will be handle change then set fill touched is valid so these are the props which we will use so after the value for the name field here we need to provide unchanged text and here for the unchanged text we need to provide handle change and here also we need to provide the same name which we have used for this initial value and in this schema after configuring the text input now we need to display the error message and that we will display under this text input so here let me check if error name will be present then we will display the error message and that will be the text and for the style of it it will be error text and the error will be error name which is the field value name which is the same name which we have used here now save it now let's check it once let's start typing so here we can see two short message and then the message has been gone right so our validation is working and the error message is showing perfectly fine as you can see right now it is empty that's why it is showing the required error message after that let's implement the validation properly so here for the email required error message I will provide this message after the email it will be password for password it will be string type and I will provide minimum 8 characters long it will be required as well and this message I want to display and along with this I will provide a regular expression where it will check for the password combination so the password must contain at least one uppercase one lowercase letter one number and one special character in it and it should be eight characters long so that is the regular expression which I am going to use and to use the regular expression we need to use this matches function so I am going to paste that regular expression here I will provide that regular expression in the description of this video you can copy the regular expression from there so here I have pasted it so this is the regular expression and it is wrapping with this slash so you can use this slash or you can use the quotation mark here so it is wrapped with this slash if I don't want to use this slash then I can use the quotation mark so that is how you need to wrap the regular expression So within it this is the actual regular expression this one I will provide in the description and this is the first parameter of the matches the regular expression and in the second parameter I have provided the error message which is actually describing what it needs to provide now save it after saving it let's implement it for these fields so now let's copy value and on change text and for this it will be email and then we need to provide the error message and this time also it will be for email similarly let's provide it for password and then the error and we need to change this email to password now save it let's check it once again so let's type some name and here we can see we have already the error message are present for these fields which is actually correct but not the proper user experience because the user haven't reached to these fields so that's why we need to provide another property here which is on blur and for the on blur we have this set field touched which we have here and for this one also we need to provide the values for each field so here it will be email it will be password after this on blur we need to provide another thing for each of these error messages which is this touched if it will be present then we will display the error message now let's check it so here as you can see it is displaying two short error message now the error message has gone now let's type some email here it is invalid email but it is a valid email and also I don't want to capitalize these things so Auto capitalize needs to be false for the email then for the passwords also I will do the same thing now let's check for the password so here it is displaying password must be at least 8 characters long let's provide 8 character now it is showing the right area which it needs to fulfill so let's provide that now the error message has been gone and when the error message is present that mean it is not validated yet properly then we will have this is valid and based on that is valid we can provide t7 value here based on this is valid we can update the style of this field so here let's provide some different background color if it is valid then we will have the normal submit button background color and let's comment out the background color from here else we will use another background color which will be this one now let's save it so here you can see we have this error message is present that's why this button is disabled so we cannot click here and the disabled property is actually is being communicated to the user by this color now let's provide it so here you can see that it is now active and we can click here right but if it is not valid so that means this button is disabled right now we cannot click here this button is disabled so now after this password let's work on this confirm password for the confirm password here it needs to be similar to password so yup dot string then minimum it will be 8 characters long then we will have a new method called one off and here it will be yup dot ref and needs to provide the reference of the value of the password so we are matching this value with this field value so that's why we need to provide that feed value name here here it will be a parenthesis and after that we need to provide the message which error message we want to display your passwords do not match and after that it will be required so let's provide the message for the required error message confirm password is required now let's check it here and to check it we haven't provided those values here so let me provide that so here it will be confirm password and to display the error message we need to provide that and it will be confirmed password as well now let's see so the error message is there so here you can see one thing confirm password is showing as this field value and that is because it is showing the error message for this Min method and for this mean method we haven't provided any error message so if I provide a error message so here you can see we have this confirm password separated by this space and here it is similar to this field value so now save it so after that here you can see this is the custom error message which is being shown so now you can get the idea that whether we provide the message or not we will get some error message from the app package but we can customize it to provide a better user experience to our user now let's provide the correct one so it is matching right now finally we have mobile and here also it will be yup string actually it needs to be number but we are using string here because with string we can manipulate it as per our requirement and here our requirement is that I will take 10 digits only mobile number from the user so that's why I am providing the strain here and then I will use minimum 10 character and here I will provide the error message must be exactly 10 digits similarly I will provide for Max as well so maximum will also be 10 character and here also the error message will be must be exactly 10 digits it will be string not the number but I want number right so that's why I will use this matches method and here we can provide the regular expression and the regular expression for the digits will be this one and the message I will display must be only digits so by this regular expression it will check for the numbers only so it will not take any alphabetical characters and then finally it will be required please enter your mobile number and we need to provide those values for the mobile numbers as well and here it will be mobile and for the error message also we need to provide mobile also we can provide another thing which is the keyboard type and here we need to provide the keyboard type as funpad so then we will have this number keypad so here you can see that I am providing the alphabet from my keyboard and it is showing the error message it is asking for the exactly 10 digits and when it is 10 digits it is saying that it must be only digits so that's where our regular expression matches kicks in so it's working perfectly fine so now let's provide the 10 digit number now the validation have been completed properly right and here for this formic we have another prop called on submit and for this on submit we will get the values which we can display in an alert which we need to import from react native and here I can Json stringify those values and we can call this on submit function by using this handle submit and we need to use that handle submit here for this submit button on press now finally click here so here we can see the values right so that's how we can validate our form in react native by using formic so this is the tutorial guys I hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 14,491

Keywords: form validation in react native, form validation in react native with formik, form validation in react native using formik, form validation in react native with formik and yup, form validation in react native using formik and yup, formik form validation in react native, formik form validation react native, formik form validation react, formik and yup in react native, formik and yup tutorial, react formik, formik, yup

Id: LtfSb5Yk6a8

Length: 20min 50sec (1250 seconds)

Published: Fri Sep 23 2022