React Native Tutorial #32 - Validation with Yup

Key Takeaways

okay that my friends so currently when we go to add a new review we don't have any kind of validation we could type anything or nothing in these and it's still gonna accept that now this is not good we need some kind of validation now to add this we could spend a while writing our own validation functions then calling those functions when the form submits and formulating error messages to show etc etc but that could be a bit lengthy and take a fair amount of logic and code and instead I'll be using a package called New York to help us with this invalidation and it also works really well with forming so the first thing we need to do is install this package so let's go to our other terminal and I'm gonna say NPM install yup and press ENTER so the way that this is going to work is that we're going to create a validation schema for our review form using Europe and then we're going to pass that schema into our form ik components now a schema is just a set of rules defined inside an object and that object is created by your forest now the keys inside that object they are going to be the different form fields the title the body and the rating and the values to those keys are the validation rules what does a value have to do to pass that validation and then when we submit the form in the future because we'll link our schema with this format component when we submit it it's going to look at those values and try and match against our schema to make sure everything passes and only carry on with this submission if everything does pass and it doesn't then we can return some kind of error so in this video we're going to focus on creating this schema and passing it in to formic now the first thing we need to do is import your at the top so to do this we'll say import asterix so that's everything as your from Europe okay now we can create our review schema which I'm going to do outside of the review form component it doesn't need to be in there soaked honest review schema is going to be equal to your dot object this is a method that creates us a yup object and inside here we define our schema so remember I said the keys of the different key value pairs inside the schema are going to be the different form fields so we have a title a body and a rating so let's do the title first of all that's the first key and then the value is going to be some kind of validation rule now to create this validation rule we say yup and then first of all I'm going to say string and that means that it must be a string so if title is not a string then it's going to fail now we can also add on another method and that is going to be required and that means that this field is required so if we don't enter anything then it's going to fail validation and I'm gonna tack on another method called mint and I'm gonna pass in for and this means that the minimum length of this string field must be 4 characters so anything less and it's going to fail validation so that's pretty easy to create those validation rules rather than creating a function to do all that stuff ourselves now the way I'm going to write these different validation rules is by going on to a new line for every little rule so we have first of all a string they're then required then min and that's so we don't get a long chain of rules that goes off the screen later on but anyway that is our title pretty much done so we can do the next field now which is going to be the body and again we say Europe this is going to be a string so dot string and then we're gonna say this is also required so don't require it and again I'm going to use min to say the minimum length of this is going to be 8 now in reality it might be something more but I really don't want to start typing out link the articles in this tutorial so I've just kept it at 8 for now and that will do for the body so it has to be a string it's required so it can't be blank and minimum length of a characters so the rating is gonna be slightly more difficult because for the rating we want a number between 1 and 5 so let's do this first of all rating yup and then I'm actually going to say string again because by default when we type something into an input field it is automatically a string and not a number so that's fine it's also required so it required like so and then down here I'm going to use a method called test now the test method allows us to define a function and that function is going to take in the value the rating value as a parameter and we will run a little test on that function and return either true or false so we can check that the value is actually within certain confines if it returns true it means that this field is valid if it's false it means it's not valid so inside this test method we define three things first of all some kind of name for the test so it's going to be is num1 so 5 you can call up what you want and the second parameter is also string and this is any kind of feedback message that you want to provide to a user if this test fails so I'm gonna say rating must be a number 1 to 5 okay so if it fails we're going to eventually provide that validation error to the user and the third parameter is the function which takes in the value of the rating and inside this function we can return either true or false I'm going to return a statement which is pass int and we pass in the value so first of all we're passing in a string which could be 5 still and we're passing that into an integer right and I'm gonna check is that less than 6 because a rating can go up to 5 only but that's not the only thing I want to check so ampersand double ampersand to check something else as well and pass int passing the value again that must also be greater than zero okay so only if the rating is an integer between 1 and 5 is this gonna return true if it doesn't return any of those it's going to return false so then it fails the validation okay so that is pretty much it we have done now I won't review schema for the three different fields and we can just pass this into our formic forum so we do that down here inside the formic components and all we do is use a prop called validation schema and this accepts the review schema like so so when we submit our form it's going to look at the validation schema and it's gonna match it against our different fields so we have a title field a body field and a rating field and we have a title validation a body validation and also a rating validation so it's gonna look at those and try and match our values against them if the values pass all of the validation then it's going to continue with the submission and it's going to run this function if it doesn't then it won't it won't let us fully submit the form okay and instead what it's going to do is populate some errors in the farming props and we'll see that in the next video but for now what I'm gonna do is save this but before I do I've just seen that this thing up here still grayed out and that's because it has a capital I don't want this to have a capital because we've not given it a capital down there it doesn't really matter whether you do I don't but just make sure they're the same I'm gonna save that now and what I need to do is restart the current process because we installed a new package so let me cancel out of this and run x-bow starts again I'm going to also cancel this up over here and then in my new developer tools I'm going to run on an android device and hopefully we should see the updated app over here okay so if I try now to add a new item I'm just gonna try to submit as is and it doesn't let me do that it did let me do that before if I type in just two letters here and one there and submit again doesn't let me do it now if we type in five letters here which is over four it passes the validation and I do a load of letters here and I also do a number here submit it now it does let me do it so it's only letting me fully submit the form if our values pass the validation schema we do mind right here okay so that's how easy it is to implement some validation with your inside a formic forum now in the next video we're going to see how to actually give some feedback to a user because if we try to submit our form and it runs through the schema and it decides it's not valid then your is going to provide some error messages to pharma-quick attached to these props so we can then output those error messages to the user so they can correct what they've done wrong so we'll take a look at how to do that in the next video