FREELessons: 12Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Handling POST Requests

In addition to GET requests, users supply input through forms and POST requests. In this lesson, you'll learn how to get data from POST requests and handle validation errors.

3.2 Handling POST Requests

In this lesson we are going to look at how to handle user input with a post request. And there are some similarities. We have that request object that we used in the previous lesson. Well, we are going to be reusing that. But there are some differences as far as the properties That we use. Now, what we're going to do is handle the submission of the contact form. Now offscreen I added the mark up, there is nothing out of the ordinary, we have an input element with the name of email. Then we have a text area with the name of message and then of course a button to submit the form. It is submitting to contact which we have a route for but it is for get requests. So in this lesson we want to write another route For POST requests and one other small little change I made was to the layout I decided to go ahead and put the content inside of the container so that everything isn't all the way to the left of the screen. So It gives us a little bit of white space to make it look nicer. So what we want to do then is whenever we submit the form, we of course want to retrieve the email address and the message but we also want to make sure that we have some information to work with. And if not, then we want to display some error messages so that we can tell the user that they need to Apply that information before we actually work with it. So let's go to our routes. It is inside of default js and we are going to add A route for contact but in this case, it's going to be for a post request. And the very first thing we're going to do is retrieve our email and our message. So we're going to store this in variables. And we use our request object But in order to retrieve the information coming from the form we use a property called payload and then from here we use the name of our form fields. So we had email and let's go ahead and trim this information so that if there's any beginning or ending white space then we'll get rid of that and then we will create A variable for message. Once again, we will use our payload, and then the message field, and then we will call trim. Now, we want to make sure that we have an email. We also want to make sure that we have a message. And if not, then we want To display some errors. So we're going to keep track of the errors that we have in an array. And then we will pass that errors on to the view in order to display them. So let's first of all check, if we don't have an email. And if we don't, then we will simply push a message to our errors array, and in this place, we want you to please enter your email address. Now of course in a real application, we would want to at least validate the email. You know, there are certain things that an email address absolutely needs to have, then we will need to do that. We're not going to worry about that in this case. There are many utilities available. That we can pull in to our project with MPM and use for validation. In this case, we're just going to keep things simple. So the next thing we're going to do is essentially the same thing for the message. So we will add an error to our error's array if we don't have a message. And we'll just say please enter A message. And then, we need to check to see if we have any errors. Because if we do then we don't need to process anything else. We need to return our view and include all of the information especially the errors. So, if we have any errors then we are simply going to. Return our view. So let's grab that from our other contact route. Let's paste it in, and then we need to supply our errors. But we also need to supply the email and the message. That way we can go ahead and populate the form with Whatever was typed into the forms so that they don't have to retype that information that just makes our form a little bit easier or user friendlier I should say. Now if everything is okay, if there are no errors, then We need to do something, and in many cases we would just redirect to another page. It might say thank you for submitting a message, but in this case, let's just redirect back to the route of our application. So we're going to use our response We have a method called redirect and then we simply specify the url. Now we could use the full absolute url and that would be including The server, the info, and all of that stuff. But really all we need to do is say, go back to the root and we're done there. So now we just need to work with this information inside of our view. So let's go to our contact view, and let's first of all add the code that is going to display Or errors. So we are going to first of all check to see if we have any errors, because if we dont then we of course don't want anything to display as far as our errors are concerned so we are going to use a handle bars if block And then we will have a div element that will have a class of alert and alert-danger. So that not only the background color will be red, but also the text will be as well. And then we will have just an unordered list so that we could then iterate over our errors. And display each one of them as a list item. So let's close out each and then we will have our LI element, we want this item within the array and we are good to go there. The only other thing that we need to then is go ahead and populate our fields with whatever Was typed in so we would have the email for the value of our input element and then for the text area we would have our message so that should be it let's go to the browser let's refresh the page And we can see that everything's fine. We don't get an error if we look at the console. So even though we made a get request and we are using the errors variable, we're using the e Email and message, we don't get any errors. And that's really nice, because in EJS and other view engines, we would get an error, but in this case, we don't. So let's first of all test this without an email address and without a message. So we submit, and great, we see our error messages. And let's fix one of them, so we are going to Type in or have an email address we will send the form again now our email address is automatically populated which is what we wanted and then our error message just says to please enter a message so here is a message. Now let's get rid of the email address so that we can test the lack of an email address and a value for the message and we should see essentially the opposite. See an error for the email address, and our message is populated. So now let's have both the email and the message. Let's send it and we get redirected back to the index. So our contact form is working just fine. So in order to access Form fields from a post-request we use the payload property on our request object, and then we use the names of the form fields in order to work with the data that we we need.

Back to the top