React Form Validation using Formik & Yup | Formik React [EASIEST METHOD]

in today's video we are going to see form validation which is very important topic in react so for form handling we use formic and for form validation we use yup library because it made form validation a lot easier I am very excited for that and hope you are too so let's get started first of all we will see how to handle our own form using formic first let's install formic Library so open up terminal by using Control Plus backtick for Windows and command plus backtick for Mac Android npm install formic or if you are using Yan then write Yan add formic and press enter now close the terminal we don't need it and let's create basic form first so I create form and give it a class name sign up form now let's add label for name and pass name here and one input type text and name equals to name now I duplicate these two lines three more times so second label for email and also input type to email and name to email as well next I want label for password input type to password and name also password and last label for confirm password input type to password and name to see password and finally we add button type submit so save the changes and take a look see we get this clean form and some basic Styles so our form looks good you can also get this form Style by just copy and pasting the CSS code in your file this GitHub repository Link in description box now let's handle this form using formic Library so first of all I import use formic function from formic this use formic is basically a custom hooks for managing States and handling events don't get confused just see this one time and your all doubts will solve so in our component First I write use formic and we pass object and first property of this object is initial values of our form so here we have to pass 4 values because we want to handle these four inputs so we create a new variable at outside of this function for our initial values and we write object now pay attention here we have to use this exact same name as we pass for our input names so first property is name because here we pass name empty string next we have email empty string then we have password empty string and last one guess what we write right it's C password because we pass last input name c password and also empty string now here we pass our initial values so in JavaScript object if the property name and value variable name is same then we can remove this value variable so I remove this and it works the same so that's why I create variable with same name now in this object we have to pass one more property which is on submit and here we pass Arrow function and we can access values of our form and print these values in console so write log and press Tab and we get console.log these are little tricks which will help you to write code fast so we pass values now let's store this in variable called formic and let's console this formic variable and see what we get save the changes and take a look see this formic variable have values errors and a lot of other methods like handle blur handle change handle submit Etc let's use these methods so I am going to restructure this object because I don't want to write formic dot values and formic dot handle change because it will make our code messy so first we want values which stores all values of this form next we want to handle blur handle change and handle submit these all are predefined functions so we don't need to Define any of them and that's why formic is so popular for form handling you don't need to write all of these functions now in our form first I pass value for this name input which is value dot name next I want to add on blur event which runs when we leave input box and here we simply pass handle blur and last I add on change and pass handle change now I simply copy these three attributes and paste it in all input tags and we have to only change these values so here I write email next password and last see password now last event which is handle submit so in form tag we add new attribute on submit and pass handle submit method and remove this line save the changes and take a look let's fill the form and click on submit button see we get all field values so in this on submit function we can write our submit form logic see how simple and easy form handling becomes using formic and also our code looks very clean and easy to understand now let's see how to validate this form using yup Library first let's install your library so open Terminal and write npm install yup and hit enter so yup Library will help us to validate values of our input field and return errors and then with the help of formic we will display the errors simple as that so let's close this terminal now let's create our validation schema first by using yup Library validation schema is basically conditions that we check perform validation so for that I create a new folder in SRC called schemas and in this folder I create new file called index.js I will explain you later why I create file with name index.js so in this file first I import all as yup from yup library now I create variable called sign up schema you can call it whatever you want to here we use yup dot object and inside it we pass our validation object so first I add name make sure you use the same name as we mentioned in our initial values so add name column yup dot string which will check our inputted value string or not then dot mean 3 which means minimum three characters needed and last dot required which will make sure this will will not empty if you want to know from where I am writing these methods you can check your documentation on npm link is down in the description box now we add our next field called email and again first we check string then we have email method to validate email address and last one is required now one more thing here in almost all functions we can pass our custom error message which we want to display in our form for example in this required function I want please enter your name now same in this email function I want please enter validate email and in required I write please enter your email now our next field is password first we check string now here you can add condition related to your choice like minimum 6 maximum 15 but I suggest you to use regular expression for validation you can search on Google regular expression for password and I give you this regular expression Link in description box you can copy from that here we have regular expression for password so copy that and in our schema file I create new variable called password regex and paste it here now here we add one more method called matches and first argument is our password regex and then we pass our error message called please enter valid password and last we pass required function with message please enter your password now last property which is C password colon yup dot string now we have to check this C password same as this password so for that we have another method called one off and in that first expression is array and for getting this password value we write yup dot rap then pass our field name which is password and second argument is our error message which is password do not match and last we add required function with message please enter confirm password now we export this schema from our file and save it now in our component first we import that signup schema from schema folder and here we don't have to write this index file because react takes index.js file as default file if we only write folder name and that's why I name this file as index.js now in this use formic we have one property to validate that schema so right validation schema and here we pass sign up schema now we get all errors in errors variable so let's add this here and console these errors save the changes and take a look see first we have empty object now I click on this submit button and see we get this all errors now I write name and see our name error is gone now let's add email and password one capital letter one small letter one number and one special character see our password error is also gone now let's add different password so we get this password do not match error and if we write same password then all errors are gone so we get errors in console and now we have to show that errors in our form so for display error I add one View and give it a class name error container and in that we will display our error now I simply add one condition which is if errors dot name is available then display the error I use paragraph with class name form error and then print errors dot name save the changes and take a look now I don't write anything and click on submit button see we get our name error but one little bug here which is when we don't even touch name input and write in any other fields we also get the error which is not good let's fix this so This use formic has one more property called test so let's console this save the changes and take a look first we get empty object now I click on this email field and nothing happens but when we left that input field then email will add in this touched object now we are in password field and when we left this field by click on other field or pressing tab then we get password in this test object so in our form I add another condition test dot name and end now save the changes and take a look now I click on this email field and then left this input then we don't get that name error if we click on submit button or leave that name input blank only then and then we get this error so let's copy this error container and paste it after all input fills now for email we change errors dot email test dot email and print errors dot email for password we change errors dot password test dot password and print errors dot password and last one for confirm password we change errors dot C password test dot C password and print errors.c password and I remove this console save the changes and take a look now click on the submit button and we get all errors so I write name and see we get different error and I write 3 or more character it's gone now so I fill all fails and then click on this submit button and we get all values in console now we can clear all input Fields after we submit the form so in on submit property we have actions method and after console we write exons dot reset form save it and take a look I fill all the details and when I click on the submit button our all input Fields get clear now we can make this code sorter by using formic components which is the second method to handle form using formic so I import formic form and fill component now I just select Out full form and press Ctrl plus shift plus p in Windows and command plus shift plus p in mac and write wrap enter and write comic and hit enter now we pass initial values equals to initial values validation schema equals to sign up schema and for on submit we create new function called on submit and copy this code and paste it here so we pass on submit equals to on submit now this formic use render props method to render the form so write curly brackets and we have props Arrow function and we move our form inside it so this props has all methods which we get here so we will destructure it after all changes I know it sounds complicated but it's not after completing this tutorial you will understand it properly now let's replace our form tag with form component make sure you update closing tag also now remove this on submit we don't need it so now we have field component which is the replacement of our input fields so I write here field and pass type equals to text and name equals to name and close this field component make sure you write the same name as we pass in initial values so this field component works the same as this input field we don't need to pass these three attributes formic does that by itself and that's the power of formic and here you can pass as many attributes you want to pass in input field for example placeholder equals to enter your name save the changes and take a look see we get input fill same as this name input so let's remove our input field and also remove this placeholder I don't want it now I copy this fill component and replace with all input fields now for email I pass type to email and name also email now for password I pass type to password and name also password and for confirm password I pass type to password and name c password now final step we have to restructure errors and test the field from these props so I write object errors comma test now remove this use formic and also remove use formic from import save the changes and take a look it works the same as before you can use whatever method you want to it's totally up to you here you can add checkbox and other inputs using this field property if you want to know how to do that you can read formic documentation here in example section you get the examples of all types of form so I hope you learned form validation in react using formic and yup Library if you have some doubts you can ask me in comment section or on my Instagram account and suggest me the next topic for tutorial I will try to make simple and easy to follow tutorial till then good bye and see you in the next tutorial

Channel: Code Bless You

Views: 2,146

Keywords: code bless you, react form validation, react form, formik, formik react, form validation in react js, react forms, formik react js, react formik and yup, formik react js form validation, react formik tutorial, yup react tutorial, formik and yup reactjs, formik react js form validation yup, yup form validation react formik, react js formik, react forms yup, formik and yup react, yup form validation react, formik react tutorial, formik yup, formik react js tutorial, react, yup

Id: -rLM9t5UMOk

Length: 18min 53sec (1133 seconds)

Published: Mon Jul 18 2022