Practice JavaScript and Learn: Create a Contact Form

2.2 Setting Up Unobtrusive Event Listeners

There are many ways that we can handle events. And in our particular case, one approach would be to use DOM level zero event handlers. Those are the HTML attributes, so that it would look something like this. We would have onsubmit, and then we would have some reference to the submit function. Now in this particular case, we do have an issue, because all of our code is currently inside of this immediately invoked function. And so therefore, it is not accessible from outside of this function. But we can expose functionality in quite a few different ways. One of the most common is just to return something from this function that executes so that then we could assign that to a variable. So we could have contactForm which I would like to have something a bit more unique, to lessen the chances of any type of naming collisions. But this way we could then expose submit that way. So that's inside of our HTML, we could say contactForm, and then submit. And that would be perfectly fine. And if we were using Vue or React or something like that, this is of course what we would want to do. However, we aren't using those technologies. So instead, what I want to do is use something that's referred to as unobtrusive, JavaScript. The idea behind that is that we want to lessen the amount of JavaScript that we have directly inside of our HTML, to the point that we should be able to take away this JavaScript file. And the form would function as is without any errors. Now, of course, it wouldn't have the user experience that we are enabling through JavaScript, but we would still be able to fill it out and submit it. And everything would still work. It just wouldn't work to modern standards, I guess you could say. But the great thing is there wouldn't be any errors in that particular case. So that means that all of our JavaScript, all of our setting up of event handlers needs to be done inside of our JavaScript. So we're not gonna take that approach. And instead we are going to use the DOM API, or the DOM event API, I should say, so that we can go ahead and set up that event handler. So we will say form and then call addEventListener, and we want to listen for the submit event. And then we want our function that is going to execute. And we don't need the submit function here because this is what this function is for. And of course, there is an event object that is passed to this function so that we can work with the event itself if we need to. For example, the very first thing that we should do is prevent the form from actually submitting to whatever is specified inside of the action attribute. Because we want to do our JavaScript stuff, there's validation and all of that stuff. So we need to prevent the form from doing that and we can do that with preventDefault method on this event object. And then from there, it's just a matter of doing all of the work that we need to do, such as validating our form fields. And to do that, we need to retrieve those fields. So we need the name, the email, and the message. So let's just take the code that we wrote to retrieve the form, let's paste that in a few times and we will make the necessary changes. So we have email, name, and the message and we want to retrieve those. So just a few modifications, and we will have those elements. And of course, if we were going to do anything with the button itself, then we would want to retrieve that as well. And that might be something that we want to do. So let's go ahead and do that. We'll just call this submit-button. And then we can retrieve that. We'll just call that variable button. What I'm thinking of is whenever the user clicks on the button, we could disable it. So that they can't just click it again, and again, and again. And then if need be, we can always re-enable it if they need to address any issues inside of the form. And we can in fact go ahead and do that. First of all, we will prevent the form from actually being submitted. And then we will use our button object, we will call the set attribute method. And we want to set disabled to true. We could go ahead and test that to see what that is going to look like. So if we click on the Submit button that is disabled, and that will prevent any kind of double posting. And that's always a good thing. And now let's write the code that's going to re-enable that. And really the only reason why we would want to re-enable the button is if validation failed. So let's say that we will have a function called validateAll which will return true or false. If it's false, then of course validation failed. And so we would want to remove that disabled attribute from our button. And let's go ahead and have some code so that we can see that this is actually executing. Because if we were to just click on the button, it would look like that nothing happened because it would be so fast. So if we have something that's going to execute, we can at least see that our code is executing. And we of course need that validateAll function. And for right now, we're just going to return false because that's all that we need this function to do. Let's pull up the developer tools so that we can look at the console. Let's click on to the Submit button and we see that it is indeed executing. So now we need to set up some event listeners for our form fields and we want to validate these as the user is typing data into them. So we need to handle the input event. And I also wants to handle the focus and blur events because I want to add some interactivity and I will show you what I want us to do. The first thing we will do is add a row to our markup, and we are going to divide this into two columns. So that's on the left hand side we are going to have our form. And then on the right hand side we are going to have an area for information. So that as the user gives focus to these fields, we can provide a little bit of information, kind of like, please enter your name, or please add a message, or something along those lines. And that's where we can also put our error messages as well. I'm not saying that this is the best design, but it gives us something a little bit extra to do so that over here we will have our information area, if you will. And once again, we want to do this as unobtrusive as possible. And so we already have our form. And our form has a property called elements, which gives us all of the form fields inside of that form. Now the issue here is that it also includes the button. So we need to be careful of that if we are gonna use the elements and iterate over them to set up all of the event listeners, which is what we are going to do. And we will do this with a little cheat here. We're going to use the arrays forEach method but we're going to call that as if we were calling it on the form.elements. And then we want the function that is going to execute forEach element. And the first thing I want to do is check to see if we are working with that button. Because if we are then we definitely don't want to do anything there. So we can do that with the tagName. And let's normalize this so that it is in LowerCase. And we need an if statement here. So we want to check to see if the element that we are currently working with has a lowercase tag name of button, then we don't want to do anything. We'll just simply return. Otherwise, we want to set up a few event listeners. So we will use our element, we will call the addEventListener. We want to listen for the input event, we want the focus and the blur. And that will get us started for the next lesson, where we are going to work with the focus and blur events on these elements.