This lesson we are going to explore a little bit more about the validation and this time we're going to do rely on the server side. This lesson is more for curiosity and if you already know and you already you're already fine with just that client side that we did in the previous lesson and perhaps you can just skip this. So let's go let's explore let us explore what I mentioned before. So instead of having the client side to the validation here let's do the server side do it for the maximum length. Like we saw before right if I get my console thing here again what was it this oops so if we have the space there 257 we get 422 but we get this empty entry. Well that's not nice right so let's go here and see what's going on. So in the event at the submit button is click it goes here it checks okay there is something there's no error it calls create entry. Now let's go to create entry. Go to create entry there is a call to fetch fine now when you call fetch we got a response right now we notice that this even though there is a 422 you might think it's an error the response was actually successful because we got a response. So if you see here in the entries even though it's red if you can see the color is different we have an error key and some message. Well this is not a standard thing this actually could be anything you want for this key and anything you want for this key so actually this is a successful response. How can we account for that in our client side. The client side doesn't yet know how to handle that so there are two ways I can think about that here. Well you could perhaps rely on create you could define right an output for create entry in a way that if anything there is a validation error it throws an exception that's one way and that exception could be caught right remember here we have a call to create entry and there is a catch block perhaps we can leverage this. Or you could also do a simple way and that simple way would be to simply if you have the response here right you got a fetch and then you got a response fine you can just check after the create entry you can go here and check okay let me check the if there is the response right this is not the entry it's going to be the response and if that has the error defined perhaps that's something we could account for we can perhaps copy this and put it here and then else right in the other case we actually do the entry because it's not an error we can do this let's try it out let's try it out. Oops I don't have that anymore let's copy this I put a quote there for 257 and you can see error is not defined oops what happened so let's debug this I'm going to go here and line 64 I'm going to add debugger so if you add the bugger something called here it's going to trigger in the depth tools of your browser the debugger so you can see because the bugger line it puts a breakpoint there we can take a look about an entry let's look at what's in entry here in my term in my console you can see it's an object has an error and I don't know why this oh I see I see I see the problem was this there's no message inside the error and there's no error right because that was from the catch and that's actually wrong so that should be what that should be entry dot error right that fixes that I did I remove the breakpoint I didn't let's make it go on and you can see entry text about most 256 characters that comes from network and this actually coming from the response now another way of handling this is perhaps you want to use leverage the catch here and let's try it out I'm going to revert this and we're going to have what we had before and what we're going to do is actually change the implementation of create entry to actually throw an error that means when you throw an error from create entry I should expect you should expect to go to catch and let's do something here now response here let's put the bugger and check it out let's see I'm going to do this I got the bug what's in response here and can see there's okay cold and fast this means it wasn't 200k there was some problem like some like data problem even though the request response was okay and that's because of 42 so we can perhaps leverage this to indicate there was a problem and let's see because we know there was a problem we can maybe set the response here to throw an error with the response error message let's go so so we're going to check here if the response dot okay is false right if this is false not okay not a way of saying that it's using not then it's going to be an error well ideally we want to throw the error but the problem is if I throw something I don't know what the message of the error is going to be because to get the error I have to fulfill yet another promise here and that would be another then and it's kind of complicated here so to simplify one way is just perhaps I want to keep track of maybe has error or something or error to whatever let's let's assume that there's no error initially and if the response is not okay you set that variable to true so why why do I have this very because I want to do another then here and I want to be able to check this and throw an error there in that in case that's the case so I'm gonna add let's see response Jason I just gave the name like that this will be the actual JavaScript object so I'm gonna check if has error right if it's true I can say triple equal true the same thing as this because if the better has anything at all it's true with the therefore it's true if it has an error I can just say throw a new error and what I'm gonna put there is response Jason error because I know beforehand that the formatting of my error messages my error objects from the server side is an object like right with the error key like that the message right that's an assumption that I made so you got to know that so that's what I'm gonna do and this message here which corresponds to this will be used to build a new error object okay and when you throw from here what's gonna happen is if there is a catch block in this chain of promises right and in this case we do have it from here lines 7 7 through 80 and it's gonna get that error and you can say error dot message and that's gonna be whatever you put in the constructor right whatever you put here and that's great but what if there isn't any error well what if there is no error I can just return response Jason as is no changes there it's just one extra step to check if there's an error if so throw that now mind you the throw here because I already throws everything after that will not be executed so I don't need to care about the else there it's you don't need that so the moments throw is immediately going to the catch ignore everything after it let's try that out I didn't forget anything you're going to tracks out most 256 let's trace it with the debugger so you can see what's going on so here I have the other burger I'm gonna put the break point here in line 35 and then I'm gonna put a break point 42 and a break point in the catch here let's try it out again you see it has made the request we got it see the network tab third one now go back to sources let's see response dot okay is false so because this is false this becomes the opposite false inverted is true it's gonna be what's has error right now false so assume no error but now it's gonna set the error so let's press F10 or what's it called here step over next function call so it does set the errors error and then returns let's press F8 to go to the next break point and it got here now what's in response to the JSON JSON it's the error with the message now has errors true now because of that is going to go into the through you can see here and response dot Jase response Json dot error is the message and your taxes odd most 256 here now you're gonna build a new error let's press F10 to see what happens F10 is step over next function call and you can see it went right away to the catch block and ignored everything afterward so that was that's why I didn't put an else there this is ignore and with that it goes to the catch and we can see the error here I hover over it why is not working is it always here it's an error object and I can see error message is that and with that it should work fine press F8 to continue and it's there let us test the normal case in case it didn't break anything let me move we remove all the break points actually we can trace it again I can see it's skip this and it's returning the response F10 let's put F8 and go went here there's no error false so it skips that and do a response Json and it goes and it's there I'm gonna move all the break points the working fine but doesn't work with the other case now there's one problem I noticed just now is we're clearing the thing we don't that's not good because we want to allow the user to to fix his message right you don't want the user to lose the message just because we went over the limit so that's not good let's fix that so the problem here is where where is it clearing let's see so it goes here create entry then and the catch because this is all asynchronous it keeps executing the code here so what could we do well we only want to clear when it's successful right so where's the point of success in this code here it's line 77 right when you add a new entry perhaps add new entry would could have the okay add new entry add new entries fine fine fine so we we have to move this part of the code where it clears the text error and error message to inside the then here okay and because of the nature of the asynchronous nature it will only execute this if it's successfully able to add a new entry so that's the fix here before it was always calling that no matter what entry create entry was the outcome of create entry right because as you call create entry that's a promise because of the asynchronous nature it just keeps executing beyond that so it's okay it does create the entry it's there it's hanging it's waiting and it keeps going and it was going right after to the code to clear and then to clear their message and then it finished but the condition to call this now is only and only after the create entry is successful try again whoops that's a whole code where's that less than again copy 257 there you go now the user has the chance to fix it let me move over the code and I fixed it is there okay so let's review what we did in this lesson we explored the server side relying on the server side to validate everything and then just catch the message from the server side and displaying that in front and one way of accomplishing that we have two ways right we could just rely on assuming that the response would have an arrow key and not use any kind of catch block or you can leverage what we already had which is what we did just now with the catch block and what we did is add an extra step here I got to have this variable outside the kind of scope to the function it's a flag variable to indicate whether there was an error assume there's no error like and then you check if response not okay set the error to true so that in the next step of the then you can do the throwing of the new error if there's no error just return the response as is this throwing will immediately go to the catch block if there is one because there is one here the catch block would actually change the error spend with the error dot message and we fixed the problem where the clear was clearing even though there was an error and they usually lost the data and had no chance of fixing his message and resubmitting it while this is nice approach I'm going to revert back to the client side only so we don't have to make a request I'll leave this client to check it so the server is not burdened with that and the client doesn't have to make that extra request sometimes it could take time and it could consume bandwidth and I'll leave that here and I'll comment out the bottom one just in case you want to reference it someday so all we have to do is true error and so on obviously actually you could still leave it in as is if you still left it here it would actually still work because it was just skip everything afterwards so it's fine I'll just leave it because that's a nice way we can the Korean entry will return an error but maybe just in case some client cannot do anything about some sort of validation maybe the server side only validation something like that so I'll just leave it anyway so with that I'll see you in the next lesson