Form Validation in React JS using Formik and Yup

hello everyone in this video we just display you and show you how to validate your registration or signif or just Forum in react.js using formic India libraries these two libraries are used for the formic is used for Forum handling and the app is used for Forum validation so now I have already validated this forum later we will just display you all the codes in how to perform this validation let's for example for press this submit button see please enter name please enter email and everything okay don't buy the user interface okay now index insert a name see the error has gone automatically and let's insert a password for example at least five character see the heater has gone but if we enter something password not image password enter the correct password the error should go what was that password that is okay okay both are the same now and also for the email sensor the email the error has gone see so now we will perform this validation using react.js and by a formic and apple libraries so let's get started by post routing if you are new to my YouTube channel don't forget to subscribe our YouTube channel let's start so this is a simple Forum which I have created okay just in name email password and confirm password we have these fails and a submit button don't mind the user interface and let's check the code of this okay we have just this as forum and input Fields label for name and input field for name then email password and confirm password in a button so this is the code of this simple I've created this energy it is just HTML code so now we will validate it using a formic and eup libraries okay the first of all you should install these two libraries so the installer for the installation we will come to the um terminal let's create a new one I will move to the client folder and there we will just npm install formic and yep after pressing enter it will be installed and your react app I have already installed them let's check them come to package.json and we have this is the app okay and this is the format which you have installed and now let's first of all we will import the first of all the definition of the formic formic is used for form handling okay for me just handle our Forum the app is used for form validation so now let's uh first of all we will import the formic for form handling import formic from formic after importing the for make now let's come here and we will use this formic function okay uh we will use we use formic okay now just formic that is use formic from formic now let's use it use formic inside it we will Define our properties okay the first one is that we will um Define or we will just enter our initial values that we have all let's declare a variable for our initial videos cons initial values is equal to it is an object with us we have name filled the default field is an empty string we have email field and password failed and also confirm password you should enter the name also input Fields okay these names name name name email name password and name c password these are important okay you should enter them after that now let's come here to the for use formic and let's inside this we will write initial values is equal to we will assign the initial values variable that we have created previously initial various and the second one the property is on submit okay what we want to get from by submitting okay whenever we submit Forum what we want to do on submit we will just get the values let's console them console.log values that we get from form this use for make is is a basically a custom hooks okay per managing our state and handling events okay this is a use for make is used to for managing State and handling events now let's assign this use for make to a variable what happened const for make is equal to use formic what we will get we will console the formic now console DOT log for make save it now let's check it okay this formic let's move to the browser the react app is running let's go to the console press f2l we came we got this object okay see how these are all four make properties okay errors and in touch and handle change handle blur these are all fields that we can get from use for make okay these are properties we can get now instead of getting data like for example now if you want to use the values okay of this eu's formic we will use formic dot values dot name for make dot values dot uh for example email password but instead of them let's do something else we will distract values from this okay const we will distract all those properties that we need distract values handle blur handle change and handle submit after extracting these properties now we will use them let's come here to the input fields so first of all we will use a handlebar on blur okay on blur event and we will call handle blur and after that on change handle change formic will handle all these things okay handle change do the same thing for all other input fields we can also assign value okay value is equal to with values videos dot name let's say first of all format this document after formatting just copy these three properties from this one and to others rest in here values Dot email for the password paste it here values dot password right now it will it will just looks like confusing for you but don't worry at the end you will get a concise okay output and this is C password and also now let's um on submit submit we will handle call handle submit let's okay now we will check this console.log dot values so we faced with an error and I'll submit yeah that's okay let's secret what is the error that we faced with it says uncut appearance formic is not defined where is formic oh sorry we should remove this now let's check it now okay let's refresh it let's first of all press the submit button see we got these input Fields but right now we don't have anything in these input Fields if we enter something like a name use of gmail.com and password something let's press submit button see we got these values okay whenever we submit but the confirm password we don't have anything inside that but these are the fields OKC password is empty but email name and password we have these values whenever we submit okay formic will handle everything but now we will just add a validation okay we will just add to check with the conditions like the name should be in not it should not be less than three and more than 10 characters and also to validate the email the password and card from confirm password so for that we need to create a separate schema we can create a separate schema in this file but that is good to create a separate folder in the separate file for that but I will create a separate file for that that is sign up validation qualitation Dot j6 as we said that the 4f is used for Forum here and validation so now we will use yep okay to validate The Forum so for that let's import first of all the app import as yep from yep and after that now let's just write export const sign up validation sign up validation is equal to yep dot object and inside that now we will Define our phase in validation for that the force field is name with us okay now we will just the name is string type with us yep dot string okay it is string with us dot minimum should be three character okay the minimum should be three character and also it should be required and let's enter a message here please enter name now let's move to the email field email yep dot string that is also string type it as dot email that is email with us and we can enter now a message please enter valid email inside this okay if the email was not valid please enter wallet email dot required please enter email now let's move to the password that is also you have dot string and for the password to validate it we can create another variable for regular expression so whenever you create a regular expression for example it should be at least one small one capital and a number in a special character so for that first of all you should need to create that schema okay you can just search it and you can you will find it after that use dot match with that okay match whenever you use this match then just enter that schema that you see regular expression enter that schema here and this like for example regular expression comma then enter a message here so right now we don't have any regular expression you can search that and create a schema for your password validation I will just enter minimum should be five character data required please enter password now let's move to the confirm password see password it is also yep dot string type and after that it should be matched with this password so for that we need to write dot one of dot one of and inside this now we will just write array in the up dot reference okay reference we will Define the reference for that that is password and after that let's insert a message password not matched okay if the password was not made so it will display this message for us so this is schema you can just extend this schema it depends on you but I wrote this just for the purpose of learning right now so now let's import it inside our Opera j6 import sign of validation from sign up validation now we will use this okay so to use it just come here to the use format function and compare to the validation schema foreign Edition now let's distract errors also from this EOS formic ears okay it will just distract all the errors if the name was empty if the email was if there was error with the password so it will store those videos inside this errors now let's display these errors so to display the errors just come here under this name input Fields here we will just display we will write like this okay errors dot name if the errors that name was existed and end we will display now that here we will display like this okay use a small character it's a small tag and display errors dot name and let's copy this and we will do it for all input fields do it for password also per email and also for the password and confirm password see password see password save it and let's move so close this and let's first of all press submit C please enter name please enter email please enter password and the confirm password we didn't display the error so let's check it see password errors dot C password yes see password C password and values dot C password let's check it where is the error see password and just come here see password it means right now yeah yeah that is okay right now these two passwords are same because both are empty strength so let's write something inside this one two three and now let's pre-submit we will we should display now the error here that error has gone but this confirm password error didn't display yeah let's make it like this now let's check it I gained it in display just come here and yeah password didn't match if you write something inside that it means it showed that the password didn't match but we will add the required field also that required please enter c password save it and now let's move what happened okay see please enter c password and if you write something it means password not matched okay now let's move on to add now we will use use for make forum and field instead of these input fields we will use format okay let's import first of all for make for make forum and field from formic okay we will use these fields instead of using EOS for make okay I will remove this use for make uh hook okay just come here and stayed up on the top of this we will use a formic and let's cut it and paste it at the bottom of this forum and inside this form which we will add now all these things okay that we have added initial videos and validation schema just come here and we will use initial values initial values and also validation schema sorry validation schema say enough validation we can also add on submit and we will call this handle submit but let's now and also instead of this forum using this forum okay we will use forum this form okay which we have imported from react formic and also instead of input fields we will use field instead of this input Fields let's remove this and instead of it we will use fill now which we have imported from formic type is equal to text and name is equal to with name and copy now this and paste it here instead of password type is pass email sorry this is email field and email and also just come here to the password field password control C and paste it instead of confirm password also see password and now let's remove this and one thing else which has remained from us that is errors okay we should display now the years we don't have errors object right now so just come here and here we will get the errors errors we will distract them now inside this we will paste this code okay cut this code and paste it inside this object okay let's save it and check it what happened see right now let's resubmit please enter okay everything let's insert a name the error has gone directly email the error has gone if we enter something wrong like let's remove this please enter a valid email and the password last five characters see that error has gone password not matched phosphorus matched so this is all about using your formic idea for a forum validation in react.js I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel thanks for watching this is the code okay

Channel: Code With Yousaf

Views: 8,456

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

Id: 5QJQeqCUoFE

Length: 21min 6sec (1266 seconds)

Published: Sun Sep 10 2023