React Formik Tutorial - 7 - Validation function

alright guys in this video let's see how we can add validation rules to our YouTube form what forming does is let you define a validation function and that validation function needs to be assigned to a property called validate in the object that we pass to the use for McCook so just like on submit we specify a third property called validate and this again just like the on submit property is a function which automatically receives the values object as its argument so we are going to have an arrow function where we get access to the values and we know that values is an object which contains three properties for the three form fields so we pretty much have values dot name value stock email and values dot channel alright now let's define the function body this validate function is a function that must satisfy some conditions for for make to work as intended the first condition is that this function must return an object so I'm going to create a new object and then return the same that's called the object as errors like errors is equal to an object and then we return this object the second condition is that the keys for this errors object should be similar to that of the values object so we need to have errors dot name letters dark email and others dot channel again these keys will correspond to the name attribute for the three form fields the third condition is that the value of these keys should be a string indicating what the error message should be for that particular field for example errors dot name can be something like this field is required so if name is a mandatory field this is the error message we want to be displayed all right now that we know the three conditions let's add the code which checks the required field rule and also the email format rule let's start with the name field if not values dot name which means name is empty we want the validation message for the field to be required so errors dot name is equal to required so if values dot name is empty then set error start name to required similarly let's add the same logic for email and channel if not values dot email burgandy said else dot email is equal to required and again if not values dot channel others dot channel is equal to required so this takes care of the required field rule for the email though we need to verify the format and that is a simple regex validation let me quickly copy paste that what we are doing here is first checking if email is empty if this error message will be required however if the email has been entered we then test the email against error checks if the test fails we update the error message to invalid email format all right a video is in fact done at this point but what I want to do is sort of refactor this code the use for make hooks readability is not the best I would say so what I'm going to do is move them to the top of our code so at the top Const initial values is going to be equal to our initial values object similarly Const on submit' is going to be equal to our on submit method and finally const validate is going to be equal to our validate function now our use for McCook can be simplified use formic accepts an object the key value pairs are initial values on submit and validate please note here that we are using the es6 shorthand syntax for object literals so our code looks much better let me now quickly recap what we have done for validation we have declared a third property to the use for McCook called validate this is a function which automatically receives the form values as its argument for the function body you basically have to remember three conditions first the function must return an object we have called that object as errors second condition the keys of that object is that of the name attribute for the form fields or you can say it is similar to the initial values object name email and channel I will start name at a start email address dot channel the third and final condition is that a string value indicating what the error message is should be assigned to the key for all the three fields we assign the message required if the value is empty and for email we also make an additional check on the format the check fails we assign the error message invalid email format all right everything seems okay so far in the next video let's see how to display these error messages in our YouTube forum thank you guys for watching I'll see you guys in the next one

Channel: Codevolution

Views: 78,929

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, Formik, React Forms, React Formik, Forms in React

Id: A1VaAsV2HiU

Length: 6min 36sec (396 seconds)

Published: Mon Apr 27 2020