 Alright, hello, this is Christian. So in this video, I'm going to show you how to validate a web form and using the control component web form. So here's the app location we're working on. For example, if I go to the app flight, remember that this form here uses the control component. So when you validate, you want to see something like these here. Okay. And I'm going to show you how to do it just your own custom way, as opposed to using a library or any type of hooks. And then in a separate video, we're going to come back and, you know, do another one using one of the libraries. Alright, so let's do something like this here. And I'm going to do that using a demo example only, and then by using, you know, by watching that and see how that's done. Then you can come back here and then see how you can actually accomplish this. Okay, so let's go to the idea over here and this is the application. I will have a demo here. If you remember, I have a form before that I used to validate some, you know, simple game characters and so forth or a user games. And first I'm going to go to the index and update this to load the, not the app, but to load the form. Okay. So it's going to load the form instead of say that and close that if I go back, you should see that now is actually loading this demo form here. Okay, so now, as you can see, it's not validating to put a here. You know, it takes a, if I do again, right, no validation, if I put a negative number, for example, it takes that as well. So we want to validate that a user cannot have duplicate user names. Maybe he also has a minimum and maximum number of characters that would do that as well. And again, yeah, is this game is a drop down. So I'm not going to validate data. I do want to validate points just that we don't allow negative values. And I'll add another field over here for the date. So how you can validate data as well and we'll add that maybe like an event data something. Okay. So let's go back and update our form just a little bit. Now, also, I, you notice that this form here has two components I put here, let me collapse this have an app component, which is the rule component, have it at form component here as well as a child component. It's in the same file. And I don't like that. Okay, so I usually want to put that into a separate form component. So let's do that. Let's move this class at form to a new component. And you just basically ease away just copy this. This is the form right so I'm going to copy control C control V, or we name this to. And I guess ad form is fine. Okay, so this is the ad form and I'm going to remove the ad component here will keep the child component only. And it's called ad form so we're going to we're going to export. Okay, everything should stay intact for this one here. And then we save this go back to your form. And now we're going to remove this entire child component. So much cleaner. And it's not too big. And you're going to have an error here it says ad form is not visible. The quick way to fix this is of course you have to import it back here. So do that you just, you know, click on the name of that form anywhere it is I think, and press control space bar. And it will show the little pop up and hit enter. And it will add that for you. Also make sure you fix that here I just, I should have put me in the end of the word. So let's do it again. Okay. So when you see someone like this, if you import, put your cursor at the end of here, control space bar enter. Okay, and I will import that for you automatically if it's correctly if it's not just fix that. If your error goes away, and everything should still be, you know, as before, save that go to your form and make sure it's still working. And as you can see, it's still working fine. Okay, so let's go ahead and do some changes. So I'm going to, I'm not going to touch this for me anymore right. Remember we passing data from the global, this parent app has a data field. So eventually we're going to store the users in here. So, you know, it's a little something like this right of user a in the user and so forth. Right. So these are user names only, and we're going to validate this form data, based on the user here. Okay, or something like that. This, this should be called user I guess what we call data so that's fine. All right, so this is the form they're going to use. And so let me open this up. Now I'm going to change this a little bit. I don't like my code to be too long. So I'm going to re rename this, actually move this, and we're changing to error functions. Okay, so this is the one that we're going to use, change your error functions here. So this is the automatic binding for you. And you don't have to do that, providing above up. Okay. Yeah, just those two. Okay, great. Right. And then the state, we have the state data here this is local stages for the local component only, because eventually when we, you know, we add the data we get the new user, we're going to push these information this entire list up to the parent right so actually I should have this national correct. It's going to have a copy that looks something like this here in the global space so actually it should be something like like this. Okay, that's one user and then to user and and so forth. So it will look like that when we add the data, a user be for example like that right so it will look like that inside this data object. So, I'm going to add another field down here to our form. We have the points and let's just copy this and we'll make it right below here and and what should we call this, I think I wanted to call event. So let's add a label here and event date, something like that. And the type name will be, I guess, call event, the type is not a number it'll be date. Okay, you don't have a minimal maximum here. I'm going to remove that. And the data will be coming from data that event. And yeah so that's it for that date right so it should be a date format. The minimal maximum here you can leave it as this like this. I'm going to change this as well, because if you set this to minimal max then you can have negative points, which is great already but I'm going to show you that you can actually validate these okay so let's remove these minimal maximum. So it doesn't have them in here. Oh, actually I've removed one thing that the title is still be there. Let's remove just a minimal maximum. Okay, so that is our form. I believe so. Let's go back and see what errors doesn't have so here we go. It's a little bit over here and right so I'm not sure why maybe it's too long, but that's okay. Okay, that's that's that's fine. Let's see if I can change that a little bit here. This is the length of. Yeah, if we call it 50% something. That's okay. All right, that's that's not going to be a problem. And that's why I'm going to spend time to change that but as you can see, I have this data. I want to do that. I want to add the data as well, but we do want to want to validate this state. Okay, when I add a new property to the state because we want to manage the current state of these the error state of these fields. So let's go back in here. The form looks good so far and the state I'm going to add another state here. And so it's going to be called. Okay, here's what I'm going to do. Okay, I want to validate each of these fields. So we'll have another property call like validation requirements or just valid Rex, I guess we can call that. But I'm going to add a function here to do to do that initialization for us okay so instead of doing this way here, I'm going to call the function down here to validate me to initialize it so we call this. State or something to use error function. Okay. And I'll call a constant data. It's equal to this guy right here put this move that down here. Okay, and this function will be called return like this that in it. State call that to to initialize the state okay so this function will return an object that looks similar to the state here. So that's my default. Const my data. And I'm going to have a another constant called valid Rex requirements. This would be an object. It is object can be include all the things I want to validate the requirements like the minimum maximum for each of these fields. And also I want to add another field here let's add it. The new date thing is called event. And we'll set it to just blank for now okay so those are the four fields that I have on my form right so the first I want to validate is the user. So we have the user. I need to set a certain requirements. The first thing I want to call is I want to make this feel as required. Notice I'm not doing anything using HTML I'm using just react methods, my own custom way to validate this on the field to be required. I want a minimum of let's say three characters and maximum of let's say no more than 25 characters. I also want to handle errors. If there's an error, then I want to put an error message. Maybe this is for like the, the minimal maximum characters, they call your message call your max. I don't know I should call your message general, if you blink. I want to have another error message for maybe a user taken a color taken, and again put a blank. So that's the things that I want to validate for my user. So we do the same thing for the similar to the other ones right. So the game will be, I just leave it. I don't really think it will be required. It's fine, but it's already in the drop down so it'll automatically be selective and that can do much with that one points. I want the just required. And, and, you know, you can set a minimum maximum but we're just going to call it not zero. So I don't care about maximum. But it is required and also air put error message if it if it's negative right to put an error message key there. And then we'll go to the event. This is the day so also want to be required. And you have a error message will be like the day is if the data is not entered correctly. It cannot be blank. And then we don't allow, you know, they in the past, right so error message, I'm going to say past date. Okay, and then finally, I'll do one more is a key. Notice I put it here in the previous example I talked a little bit about error message here is an error message in the global space here you can use that as fine to validate. But instead of putting in a global space that I'm going to attach this as another key to the validation requirements property here. Okay, so it stays with the state. And I have to use that over here so I'm going to add another one you call error. And then you said that to false. Okay, so that is my validation requirement for all the fields. Okay, so I don't need this anymore, remove that. And finally, I want to return it right so return is that my state will look like this. What I need. I need an object of the data and the valid ranks. Okay, that is the state. So if you were to, you know, move this up here like this, we will look like that. And then this will look like this. Let me just show you that's why it's kind of ugly to do this look like that right. So notice I, it looks like that. Okay, that's why it's, it's too, it's too complicated to see. Okay, and later on I need to reset it again I missed a point here. Right, need to reset it again my data so it's going to be a lot of work so therefore I create another right so you create a function to do that for you, and it's much easier. I missed a point and it's taken here. All right, so that's my state. And then. So down here. Let's see, I'm going to check my atmosphere it's not broken. If it is, we'll have to fix it. Okay, it looks so far so good. It's still submit. I mean there's no data here. It works right before negative number and no validation put a date in here. I didn't add date yet but you can see that's the working so great. All right, so now let's go and fix something in here my submit function. I'm going to submit error that date, and you can include the set stay okay so when I said they want to set the state here. I'm not going to set the state like this anymore right I'm going to call the, the function to reset. Okay, I'm going to call this function in it to initialize it. So now I'm going to turn this off. You know this that's actually no it wasn't it was okay. I mean inside here, this is not going to be this anymore because I have two different properties in there right have a user and the valley racks. So it was called this function called this state you invoke that function, and it will return a new state or actually basically resetting to the original state in here. Basically, that's it. Okay, so that's that, and then the output down here let's add one more, the output notice we only showed, I think in the parent form. You only show the user and let's add the other thing here called the event. Okay, so now we have the event object attitude that form right. So you should, it should show up the show the data as well as you can see here so I put a some points and that date. Okay, see that day right here. Okay, so four things. I did not choose the game for some reason that did not come through. And we need to figure out why, why did come to it. So we want to fix that. Somehow it's not coming through but it should be fixed. Alright, so now let's go back to the form at form here again. So let's do the, the validation part. First, what do the, so what we're not doing this like live, you can if you want to. So on the unchanging and validate as you go, but I would validate only after I submit the form. Okay, so we handle when you click the submit, then I'm going to go ahead and do the following so I'm going to create a function down here. So instead of putting all the things like here's going to be really big so I'll call function called validate form. Okay, again use error function. So what happens in here. Right, a few things. So I'm going to call this function right here before I do the error. So again, this error is no longer there okay I don't have the error error and message anymore. This error is coming from the value racks. This is becoming from the state that value racks dot error. Okay, it'll be that you're here and because it's false. Then, let's see. Yeah, if it's if it's false then it's not going to validate this form. Okay, so so let's see if that's true. Go back. And you can see that it's not going it's not passing data over. The error was not added right. Well, get away but it's not supposed to. All right, so let me let's finish this. When I handle when I validate the form. Let's see when I handle the form. What do I need. I'm going to get the data from the global data, which is the app data right so if you remember from the app JS file, this data here, you pass it down as a child to the child, not not that one. No, in the form. Okay, so this data here we pass it out to the data as it's data. So I'm going to get that from the parent. So that is the single source of truth. So I'll call that G data is coming from this that props that data. Okay, that's the global data. Also get a copy of the local data. So constant call data from this state that data. Okay, that is this guy right here. This is the data right here. I also need a copy of the requirements as well. So again, I'm going to do another one and call it cons. I call the same name okay value Rex. It's equal to this that state that value Rex. Okay, so I have those three copies. I can use that to do in here. And before you be. Okay, so before you begin, make sure that every time when you load the form you validate right you have to set the error message to false, because if it's true. In the previous state, then it will be true. We don't want that you want to reset everything everything to false all the time. So I'm going to do that right away. So if we get one city error equal to false. I mean, we assume there are no errors. Okay, that's the default initialization part. I also want to get the data from the state data here, the users only a list of users because I want to validate value user so that's the first thing you ever do validate user. Okay, so what I need. I need a copy of the user only just for you know easier to, you know, to, I guess to validate into performance of operations. So, I'll call it. Const users is equal to the G data that all the users right the G data that map is the map function to return all the user only so all the user return all the user that maybe it's confusing. Let's call it object. Okay. So what I'm doing here is basically want to get a list of what the user like a. And see and so forth all the user names only put into the user's list. It's a list or an array of that right. So once I have that then I can do some validation. And you can check if the current user in the data here in the form it contains the data that user is in this list or not. Okay, you can do that in multiple ways. And you can use the index, you can look for the index if they use a distance there, or you can look for use the include function, maybe one of those will be easier, and I'll use the include function okay. So say if the user includes the name of the data that user. If that is true, then I have a duplicate right. Otherwise, it should not be duplicate. So that means that if I if I do this and go to the browser can show you really quickly. So go to console over here. I have a bunch of error, that's okay I'll fix that later. So if I do this if I do a is put to that right. So here's my a down here. And if I put a includes, you know, be you see that it's true. Right. They put BBB it's false. So that's, that's how that's what I mean if I if the user is called Apple and it's in there and I mean it's included I mean it's duplicates. The other method I showed you what the index so if a that fine index of the for every for every value value that value is equal to the, let's say a, then it'll return is zero, the position of zero a is in zero position. If I do a see the position of two. Okay, if I do something else not there you get a negative one right. So you get a negative one CCC down here so you're checking if it's a negative one, then you're going to go. If it's not a negative one then is a duplicate right so it either all those options will do for you. That's what I mean by using includes. If it's in there, if it's true, then I have a duplicate so if I have an error, and I'm going to set the error for this user dot error message or error taken saying they are taken here so the US taken. They will also check the minimum as well. So let's do that. First, the valid racks that user that error taken a message saying user already taken that is the error message. And I'm going to set the error flag to true. If that's, if that's not the case, if it's not taken, then chances are, you know, once I run the first time and updated the user if it's already and not taken, then I want to re update the taken error message to blank. Right. That's all I'm doing. We set it to empty strength. If you don't do that, you will see the error message stated all the time and you don't want to display that. So you can see this pattern for all the other types. So that's for the user of the taken. I'm going to copy this. And if we do again down here, this is for the user of the length, right, this will be should be easy right. I'm not concerned about the data. I'm just concerned about the user data here data user. If the length is less than the minimum requirements value racks that user that minimum, right, if it's less than that, or if the data the user length is greater than the value racks that maximum user max. If that is true, then that is an error as well. Right. So you can say user user name must be between, you know, those two characters, you can you can make it more dynamic using this way between value racks user minimum and value racks, right. Racks user maximum. Okay, so something like that right between three and five characters. A user must be 25. Okay, that's enough. And then otherwise. So it's not taking this will be the error message. And then again, we'll set that to not if it's not here. Put that there. Okay, so that's a user. We can test that first to see if this works. Okay, so let's say that. And down here, when I validate the form. I'm going to show that error message right. Let's see if it's correct. I hope there's no error messages. If I submit, right, you can see that there's no data if I put here. There's no way of knowing that. Okay, so I have to, you know, do something, give it to the user right display to user and and so forth. So let's go back. So in input form, the user here when I do the control. I need to put the message here. What I do here. Okay, I need to check the rack. So I'm going to go up here and get a local copy of the rack as well. A valid racks requirements. I don't have to tap that many, many times. Okay, and I'm going to. I'm going to go back to the user name here. The value of the user handle change. Okay, that's fine. Now I need to display that the result back to the user. So right after the input here. Okay, I'm going to check to see if the value rack. Is that user dot error message is there or not. If it's if it's true. Okay, if it's true, then let me have some data in there. Then has an error. Right. So therefore I'm going to do a div class name. See do I have. Any other feedback or something. Be back. I think I have that error message. I don't know where I got that from but there's CSS for that. See. I think it's probably CSS. Okay, so maybe error feedback is a class name for that. And then the div. I'm going to close the div here. And here I put the message, the message is that the valid racks that user that error message same thing right just read display that message here. If it's, if it's if it's an error. That's all I'm doing. And also display the other one. The two messages right that are taken. Okay, and then same thing here. You show one or the other or both. Well, this is one or the other. So let's see if that's the case. Right, so let's go back and see fresh. Okay, it's not shown there let's see that from some before. Okay, so let's see what's going on and probably do something correctly in my code. And then for right here it says, by the racks, by the racks here state data, change, that's fine. There's nothing here that I can think of first having the error. For some reason didn't like this part let's try again. Valeray user taken. Let me see one more time. I have an error in my codes for some reason. Okay, so we put a yes an error component changing control input of 25 to be control switched from a control to control. At line 74. All right, so let's see what's going on here. And let me pause it and find it first okay there's an error here. Okay, so I found the error. And so it's a little bit tricky I should have caught that early on, but the error was when we create the data here, I duplicated my nested the data a little bit too deep, right here. Okay, I already have data and have data again right so actually this is not correct. I don't need this data part here. Okay, we move that data. We move that extra curly place at the end. And, yes, so that was the error. Okay, so that's, that's that. And then also we need to call the variety form in here we click the handle submit we need to call it so this that variety form, otherwise it's not going to work. Okay, we call that the variety form. And it's going to update the data show the data here message here. And then, and our form down here. Let's turn this off already. Let's turn this back on. Now, I just realized that this invalid feedback is part of the bootstrap. You know, theme that is come that come with the, the, you know, application. So this only turns on if you have an invalid type of feedback for a class it is like it depends on one of the classes, like the invalid class. You're not going to see the information here. So for now, I'm going to remove this one for now so you can see the error messages. Okay. We leave a blank for now. And so let's see what it looks like in the browser. Okay, so refresh it. Okay, you see that way that the form doesn't validate doesn't doesn't go anymore because I did have an error here. And you can see if I do that you see the error message comes right here right here right it's a little bit delayed because we did not update the data. So if I take it with a blank to submit, it's nothing until I touch the user again. So I never update the data the state. So let's do that first. When we submit the data remember that this racks is part of the state. Right. So when we make any changes to the validate form function, because we modified here he or he or he or any place else, we have to update it. So therefore at the very end of the function down here at the bottom, we're going to set the state. We set state. And this case I'm just resetting just the value racks. Okay, so usually value racks like that because I'm using the same name as you can see. If that's the case again just use it, remove that once. So now the up this will be always be updated once it's updated in our form will always be updated as well to show the correct message. Okay, so let's see one more time. So again, if I just click submit. Okay, racist state is not a function. Okay, I'm going to type that somewhere. I'm pretty sure this. I'll not be so sorry because that state. Okay, so you go again clear and refresh and there we go. See the user must be between green 25. They put a and then I see that goes away it gets, it gets updated to the data it puts into the state already, we did not validate the points and a date yet. So if you go back to the A is here, if we try to use it again, I'm expecting a duplicate data. So you see has a user already taken because it's duplicated right. So you put, if you go back to just a, then and go back to the, you know, the minimum maximum. If I go too much, you have more than 25, and I probably didn't have more than that but as you can see it's actually valid. That's good to go. Now, what I want to show you was the, the error message using invalid I want this to be in red, also want to highlight this in red as well. Like I showed my actual demo I showed you earlier, and to do that you need to do two things. Okay, so that when there's an error, then I want to call a control call invalid feedback. This is part of the bootstrapping. So to do that though you must have this control must also have a class call. I think it's called is invalid. Okay, so you must add that to the control. I'm just for example only. So if I do that. And let me add this back down here as well. So let's go back to your browser and you'll see that it should be highlighted like this, right. So if I do is submit, it should be in red like this and I give you the error message red. If it's no error message that you're not going to see that message. Okay, like that, then you're going to remove that back to just the gray here. Okay, so it's like an if and else part right. So that means you have to kind of control when should I add this invalid when should I not. So the whole way to do that right is you can check, you can use like the condition operator and so forth. What I want to do is I'm going to show I'm going to use a function to do this for me. Okay, so let's say I have a function here called error function. And is it valid is valid date is valid date is valid is valid. That's fine. And I use a, got it. And in here, I'm going to return. So this class will be either like this, like this, right, or like this. So that means I'm going to call this function here is functional return, either this, right, or a return return just this, either one of those. Okay, back to this one usually in this case I'm going to call the function call is validate. So, because if I do for every other fields, I need to know where to to inject this message to right. So it's coming from the user here. Everyone has a different field name. So going to pass this function, the user name, the field name. And what type of error message I'm checking for. So for the user I'm checking for the error message with this, which is, which is the user. What I put it. Yeah, the user, the error message or the error taken right either one of those. So I need to know both of those. Some only has one, like the points, but the error message and the data have their own past parameter here. So this is the same let's say I'm uses for the default which is the maximum maximum requirement. And this is another another field. So what I'm going to do is I'm going to add two parameters to this function. One is the user. The other is, you know, it's possible that has an error called taken right. There's another one. And how do I check that is over here. So I'm going to have the first one will be like the quality key. The second is maybe called field. And it's possible that I might not have that so a set default value to know just in case that it doesn't have any data. So how do I check that here. So I want to check. So if the value racks. Okay, that's this guy here of the key. If it's the error message is true, then return isn't valid. That is one case, or if the value racks of the key. And I can't put like the error taken right, because I don't know, because you know this only works for the input. What about the point what about the date has a different field. Right. Most of them have the error message as a major dissimilar keys as you can see up here by message message message, but this is unique, a different field has unique value so therefore that's why I pass in the second parameter to this function as quality field. So in this case will be taken a user as the field. Again, lots of ways. This is one way to do that. Okay, so pass in the user. That is the key a valid that user that your message. Okay, that user that feel which is this care taken if either one of those has an error. I'm going to return this. Otherwise, return this. So this is the else. Okay, so that is my function to do that part here. And we'll see if this one works. Okay. So let's save that and go to the browser and refresh the page and submit. As you can see, it loads a function, and it knows that I need, I need three characters or more if I put a a a is valid now. It's going to issue take it. As you can see now, it goes up to the parent, and we display the data here. So the data is now active is live. If I do it again, the two errors, right, must be three characters or more. If I do a three character duplicates already you should have the other message. And here you can see. So that is how you would solve this problem. And if we're going to do something similar to the date and get the points as well. So now that now that's been taken care of. Let's go and do the other ones. So we use this function to solve that as well. So the class will be class that will be applied here instead of control. And this, the game I don't I don't believe the game because it's a dub down other points points. And I don't have I don't have the second year message for that. So I'm going to leave it blank and just remove that. Okay, adjust the error message. And the same thing for the date down here. It's going to be the date for an event. And then the other one is called ever past date or something. Yes, the other field. Right. So now I'm going to go up here and copy this again. I'll copy both of these. Put it down here to the points right after that. I only need one for this one. Okay, the points only need one. But the date I need two of them, because one is like invalidate and and the older. Oh date. So it'll be event here. And an event. Now you're taken by your past date. And I want to split the same message down here as well. Okay, that's for that. And this will be event here event, not user should be event. Okay, so that's that's good for that one. Okay, this is the point. So I'm going to put here points, their message and also here points. And this will be also points not user. Okay. So event event, their past event points points. Okay, and points error points points. Okay. Right, great. So that's pretty much it for that one. And because we never validate the points, the points that you're not going to see the error messages here because we didn't do that yet. So let's go and complete our validate form function. So we got that user and the things are here. So the next thing here is going to be the points. Okay. It's a simple one right you just want to make sure that the data is now is not negative. So it's very simple. So you can do something like if the data that points is less than zero. And they want to want to set the message. I'm going to copy this again, which is just copy and paste here is the same. The event, I mean points, and then we set it to true and then the points also be set to false. If there's no message. So we'll say points. Let's say points cannot be negative. Right, that's the error message. And then that's it. So I'm going to copy this. And what do the other one, which is the event. So better rate event date. Now, it's called it's on this example here. So I'm going to go and set a default date. As you can see this no default data of form is just called blank. So I'm going to go up here and create a variable. And I'll call it default date and call it whatever you want. It's going to be a string, I say 2000 January first that is a default date so I put that inside here the event date would be this default date. It's automatically updated for you. Right. So, if I go to the form you're going to see that now, see the date has been hoplite for you. So this is default date. Now anything after this day is valid or included that day, anything before that will be invalid date. Okay, and if you don't include the date. In this case, you know, it's not there but if you happen to set differently so that you set it to just empty string, I do this like that. So this is considered empty string. Right, so therefore it's invalid. So again those two parameters. And so down here, validate two things. Check for the empty string. Okay, is way easy. If the data of event is empty string like this, that means that they is not set. And therefore we'll put a three zero, make sure they are actually strings. Therefore we have a date event error. Event error. Let's say I'll put here something like a date is required. It's basically required we set true, and then we set the error message to blank. And another one. This is for the data as well but for the passing date. Now, a couple ways to do this, you can validate the date using the date object or use the date as a string. Okay, so so two ways. And in this example I'm going to use just a date object. So this date here is a string. Right, this is the default date up here. You have to convert this to an update object so you can compare you can count you can compare the object against the string. Okay, so what I'm saying is this example here. And I'm going to create a, so the new date, new date of the default date default date that's what I have. If that default date is greater than the new date of the data set and then field, we call the data event. Right. Data event is the actual date inside the form. Okay, if it's greater. If the default date is greater than that then it's illegal right cannot be passed. So I'll say they cannot be in the past. Otherwise, it's going to go and so again, the error message will be error pass date. Error. Okay, I think that is off on this one. And then we update the data here. Not past but past. Okay, let's give it a try and see if this works. Let's just submit. And we got that one here the other two are not there yet. Okay. Okay, so this to, I mean it's actually valid right. There's no error. If I go and pull a negative one. You see that can I be negative. This also cannot be set to true if I put a date in the past let's say, 1999. Okay, so you see all those error messages and now being validated. How you validate your data. So I put a, a, a, that's taken. If I put a, a, b, that part, that part should be okay. Oh yeah it's worth taking as well. If I believe B that goes away. These two are still cannot be validated, but I mean cannot pass. So put a 34. That's good. Now that they cannot be in the past. Let's go and change the date to the future date and Has to be not in a different year right different year. Let's go up to 2000 and boom. So there you go. Okay, and that's another one if I put like, you know, delete that just press the delete key. That is a different type of error. You see that date is required if you see that because this will be treated as an empty string and so therefore you must have a date. So again, if I go in the past. You know it's beyond the default already so that's good to go, but this is good. This is not required. I mean, and now everything is good. And there you go. That's how you validate data using this approach. So again. So this function here, the purpose is to go through and validate each field, each requirement for that field make sure they match. And as you can see the error message here is all set to true right at the necessary anywhere else to be false if I do that it's incorrect. So we end up either false or true initially you force it to be false that there's no error message. Now everything looks legit. But if one of these ever set to true, then the entire thing is now false right there. I mean the error message is there so that for the form cannot be submitted and make sure you also update that requiring a state so that you can see the current data being rendered to the view when you display the messages here. Okay, so I hope this is helpful. I know it's a lot to take on but you know we watch it kind of study again how this is done. And that is again one way how to validate your form using your own approach. Thank you, and I'll see you the next video.