Lesson Summary: Validating Maximum Length for Entry Text

In this lesson, we are going to learn how to validate the maximum length for the entry text. Let's get started. So, let's say that the entry has a maximum length of 256 characters. How can we validate that and prevent the user from typing too much? That is more than 256 characters. Well, let's first check the client to see if there is any validation. Obviously, we know that there isn't, but let's just try. Go back to the browser. I'm going to generate 256 characters. Let's say A is character B. And then I'm going to do a loop. While A dot length is less than 256. I am just going to say A equals A plus A. In this case, it's going to concatenate the strings. So, we got this. Let's say, let's get the length. Oops, this doesn't work here. Maybe it only works in the node prompt. Anyway, I'm going to copy that. I'm going to say dot length 256. Correct. Let's try to type 256 to the work. Okay, I copied the quotes. I shouldn't copy the quotes. So, that works fine. They even have the style issue, right? Oh, no. And that happens because of the word wrapping or break. It thinks this is one single word, so we will not go to the next slide until you put a space in between the characters. Anyway, realistically, we would have some space. Let's add some space here and that counts as one extra. So, this is 157. And is that still allowed? Yes, it is. You can see that since there's a space, it knows how to break the line. Anyway, our job here is to write validation so this cannot be done. Let's first do it on the server side instead of the client. So, let's start. Let's go to the server side. We already have some validations here. All we have to do is add a new case. So, we can say else if, well, if it goes to the else if, that means that entry tags has at least one character. But we want to check if the new entry dot text dot length is what? Well, it's invalid if it's greater than 256. In this case, we do pretty much the same thing. So, you can just copy and paste. You can say rest dot status is going to be 42 to unprocessable entity dot send and the error message. Okay, entry text. Just say is at most is at most 256 characters. Or maybe my error message is not very good. I should say these are you typed more than the allowed 256 characters. Anyway, return save that. Let's try it out. No, it's running. So my server after I saved, it has been restarted. Can go back to the client refresh. You see we lose the in memory entries. Try again. This is 257. And we got 422 even though it tried it added something here. So that's a bug net in our program that you have to fix, right? Because we just added validation. So let's do. So let's see at the network tab. We can see 422. What's the response? That's the error message. Now let's do the client side. Let's see. Go to script.js. You can see when we click. Let's go to the code where we have an event right out event listener to submit. But when we click is going to execute this find out what the user typed and so on and so on. So now what comes to my mind is, well, so you could use the response from the server to actually validate it. So there's two, two kind of ways here that I can think of as I'm thinking right now. Well, one way is you can take the invalid input and allow the user, the client to send the request with the invalid input. That would cost you the request, right? And it would take some time for the server to process and you get back a response. Now, if I did everything on the client side, that means I don't, if I see something is invalid right away when I click the button from the client side, I say, I, this is invalid. I don't have to make the request. So we save some costs there. Okay, so there are two ways of thinking about that. Now, if you do that kind of, if you do the server side route, just let the server side do it, you kind of have more, let's say the server side would determine the text of the error or something, and you leave it to the server side so the client does less, a little less work, or you can have the client do more work and handle its own error, custom error message. So you would have to pretty much do the same thing twice. But it's, you choose whatever you want to do. In this case, I'm just going to do what we were doing before, just doing everything on the client side. So we have, we can save that request. Maybe that request would be too costly for your users. So let's do that, just client side. So we already have code from the front end validation here. And it's the just empty text. All we have to do is add another state else if okay, it has something but how long is it entry tax dot length, if it's great and 256. You can do the same thing like you check is there is there an error span remind that variable corresponds to the hidden span that's there with the error message. Now you can take tell the span hey, let me remove the class by its error span or class list I'll remove new entry dash error dash hidden, and that will make it show but the problem now and and don't forget to return because we don't want to add any entry problem we have right now it's actually doing the create entry even though it kind of got an error. And actually that's not I'm thinking about this. We have the create entry and we try to do the server side and somehow it didn't. It went here instead of handling the era. Let's come back to that later. Let's just focus on the service client side here. So if I refresh here and I want to try type the 257, click right. You see nothing happened. Right. No, you can see the network tab there's no entry for any request so we save that request just by looking from the client side. And the error message of course is wrong right. So let's fix that. You can say like we did before here. Where's that? Oops, can say error span the text content equals some message, whatever we type in the server we can just copy that all can do our own entry tax. Must not be longer than 256 characters something like that. Right out again. There you go. Enter checks must not be longer than 256 characters. Now let's try removing one character and click right. We cleared the error we cleared the entry text and that's good. It's here. Refresh and is all good. Try it again. Remove one. There you go. It worked just fine.