Practice JavaScript and Learn: Create a Contact Form

2.3 Organizing Functionality With Objects

In the previous lesson, we changed our markup so that we have essentially 2 columns. On the left hand side we have our form, which leaves us this area on the right for displaying messages. And the great thing is we have a variety of different types of messages to display. We can have informational like whenever the user focuses on any one of these fields. We can have some informational messages. And if validation failed for any one of these fields, we can display the validation errors. We can even have our application errors, over on the right hand side as well. Because there's no guarantee that whenever we click on the submit button, that the HTTP request will actually succeed, it could fail, but we could also display a success message. So, this gives us a lot of options to enhance the user experience. And in terms of code, I am thinking, that we need some way to display these different types of messages. So I want to create a separate object one that's going to represent this message pane, if you will. And this message pane will have multiple methods for the different types of messages because who knows we might want to display those messages in a slightly different way. So let's start by creating a new file. Now I want to put this inside of a new file because while it could be considered that this is part of the email form I'm thinking of this as being a completely separate entity. This is a message pane. And plus I don't want to clutter up our email form file. So let's create a new file. Let's call it message pane. And let's go ahead and include this inside of our HTML. Now since this is essentially a dependency for our email form, we should list this before the email form. So we will have message pane listed first. And then we will have our email form. And this is going to allow us to have an object that we can then pass to this immediately invoked function. So, let's say that we're going to have this global variable called messagePane. And then inside of this immediately invoked function we can actually refer to that much shorter like msg, so that whenever we focus any one of these form fields, we can say msg. And then, you now call an info method, and then pass in the message that we wants to display. So let's implement that. Let's get to our message pane. We will start with our variable and we will use an immediately invoked function. Just like we did before, but this is going to return an object. And since we already know that we need an info method, we'll just have our info message. And then we will have the code that's going to actually run write that message to our messagePane. And so we need an element that's going to be used for displaying those messages. So let's go to this second column. And let's add a div element that has an id of info-messages. So the idea is that this is where we are going to put all of our informational messages. And so instead of our email form or not our email form instead of our messagePane, we are going to retrieve that element. Let's call it infoOutput. And we will use getElementby id in order to retrieve that element. And then for right now, let's just use inner html. And, because that's the easiest thing to do, and only does that replace whatever was currently inside of the elements but it also gives us the ability to set, the new content there. So and now, whenever we focus on any one of these fields we should see a message pop up. Let's do a refresh here. And we're not seeing anything. Let's make sure that code is saved. It is so what's the big deal? Let's take a look at a console. Let's see if we are getting any errors and we are. GetElementsById. That is not a valid method, so there we go, that should fix that and whenever we focus there, we can see our message. I don't want that all the way at the top, though, so let's add some style here. If we're going to do this correctly, then we of course would want to put this inside of a class or something to set these styles and then apply that class here. But I'm just going to take the easy way out. Let's add some padding to the top. And actually, let's just add some padding all the way around. And let's do five pixels. We'll see what that looks like. So that's whenever we focus here, and that's a little bit better, and we can go with that. All right, so now we just need to be able to display different messages for these fields. And one of the easiest things to do is to just include that here with our markup, because we have the ability to use custom attributes that begin with data. So we can say data-info that will be for our info messages and we could have something generic like, Please into your name, but lets do something a little more fun like, Who are you. And then for the email address, I don't know we could do something like, the better to respond to you with. That's at least a little bit more creative. And then for the message, what can we do there?. I guess we could just say something like what's on your mind or something along those lines. So that this is the information that we will grab inside of our input event listener and then we will pass that on to our message pane object. So we already have that code boiler plated out we just need to retrieve our message. And that's going to be very easy because we have the targets of the event which is the actual field that we are focusing on. And then we can use the getAttributes data-message or no, data info. In this particular case, that's going to grab that value, and then that's going to pass that on to our message pane so that we will see our messages being displayed? Now we are handling the blur event as well. And while we technically don't need to because we can see that this works just fine. Whenever we blur out of one of these fields We still see the last message that was written to our message pane. And I don't want that. I want that to clear out because that could be a little confusing for the end user. So for the blur event, we will just simply call info, we will pass in an empty string, and that should give us the functionality that we want. So if we focus on name, who are you, email, everything appears to be working as it should. And then whenever we blur off of any one of these, then our message goes away. So that is great. And now that we have a mechanism already set up for displaying messages, we can easily display validation error messages, and we will get started with that in the next lesson.